In de informatica gebruiken we het woord klem als een manier om een getal tussen twee andere getallen te beperken. Als het wordt vastgeklemd, behoudt een getal zijn eigen waarde als het in het bereik leeft dat wordt opgelegd door de twee andere waarden, neemt het de lagere waarde als deze aanvankelijk lager is dan deze, of de hogere als deze aanvankelijk hoger is dan deze.
Als een snel voorbeeld voordat we verder gaan:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Terugkomend op CSS. Er zijn een paar manieren waarop u een nummer mogelijk moet beperken tussen twee andere. Neem bijvoorbeeld de opacityeigenschap: het moet een float zijn (tussen 0 en 1). Dit is meestal het soort waarde dat u wilt vastleggen om er zeker van te zijn dat deze niet negatief of hoger is dan 1.
Het implementeren van een klemfunctie in Sass kan op twee manieren worden gedaan, beide strikt equivalent, maar de ene is veel eleganter dan de andere. Laten we beginnen met de niet zo geweldige.
De vuile
Deze versie is gebaseerd op geneste iffunctieaanroepen. In principe zeggen we: als $numberis lager dan $min, dan houden $min, anders als $numberis hoger dan $max, dan houden $max, anders houden $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)); )Als u niet erg zeker bent van geneste if-oproepen, beschouw de vorige verklaring dan als:
@if $number $max ( @return $max; ) @return $number;De schone
Deze versie is veel eleganter omdat hij zowel de functies minals de maxfuncties van Sass goed gebruikt .
/// 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); )Letterlijk betekent: houd het minimum tussen $maxen het maximum tussen $numberen $min.
Voorbeeld
Laten we nu een kleine ondoorzichtigheidsmix maken voor de demonstratie:
/// 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; )