Serrer un nombre - Astuces CSS

En informatique, nous utilisons le mot pince pour restreindre un nombre entre deux autres nombres. Lorsqu'il est serré, un nombre conservera sa propre valeur s'il vit dans la plage imposée par les deux autres valeurs, prendra la valeur la plus basse si elle était initialement inférieure à elle, ou la plus élevée si elle était initialement supérieure.

A titre d'exemple rapide avant d'aller plus loin:

$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1

Revenons à CSS. Il existe plusieurs façons dont vous pourriez avoir besoin d'un numéro pour être limité entre deux autres. Prenons la opacitypropriété par exemple: il doit s'agir d'un float (entre 0 et 1). C'est généralement le type de valeur que vous voudriez fixer pour vous assurer qu'elle n'est ni négative ni supérieure à 1.

L'implémentation d'une fonction de serrage dans Sass peut se faire de deux manières, toutes deux strictement équivalentes mais l'une est beaucoup plus élégante que l'autre. Commençons par le moins génial.

Le sale

Cette version repose sur des ifappels de fonction imbriqués . Fondamentalement, nous disons: si $numberest inférieur à $min, alors gardez $min, sinon si $numberest supérieur à $max, alors gardez $max, sinon gardez $number.

/// Clamp `$number` between `$min` and `$max` /// @param (Number) $number - Number to clamp /// @param (Number) $min - Minimum value /// @param (Number) $max - Maximum value /// @return (Number) @function clamp($number, $min, $max) ( @return if($number $max, $max, $number)); )

Si vous n'êtes pas très à l'aise avec les appels if imbriqués, considérez l'instruction précédente comme:

@if $number $max ( @return $max; ) @return $number;

Le propre

Cette version est beaucoup plus élégante car elle fait un bon usage des deux minet des maxfonctions de Sass.

/// Clamp `$number` between `$min` and `$max` /// @param (Number) $number - Number to clamp /// @param (Number) $min - Minimum value /// @param (Number) $max - Maximum value /// @return (Number) @function clamp($number, $min, $max) ( @return min(max($number, $min), $max); )

Signifie littéralement garder le minimum entre $maxet le maximum entre $numberet $min.

Exemple

Maintenant, créons un petit mélange d'opacité juste pour le plaisir de la démonstration:

/// Opacity mixin /// @param (Float) $value - Opacity value /// @output `opacity` @mixin opacity($value) ( $clamped-value: clamp($value, 0, 1); @if $value != $clamped-value ( @warn "Mixin `opacity` needs a float; #($value) given, clamped to #($clamped-value)."; ) opacity: $clamped-value; )