W informatyce używamy klamry słów jako sposobu na ograniczenie liczby między dwiema innymi liczbami. Po zaciśnięciu liczba albo zachowa swoją własną wartość, jeśli będzie mieszkać w zakresie narzuconym przez dwie inne wartości, przyjmie niższą wartość, jeśli początkowo jest niższa od niej, lub wyższą, jeśli początkowo będzie wyższa od niej.
Jako szybki przykład, zanim przejdziesz dalej:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Wracając do CSS. Istnieje kilka sposobów ograniczenia liczby numerów między dwoma innymi. Weźmy opacityna przykład właściwość: musi to być liczba zmiennoprzecinkowa (między 0 a 1). Zwykle jest to wartość, którą chciałbyś ograniczyć, aby upewnić się, że nie jest ani ujemna, ani wyższa niż 1.
Zaimplementowanie funkcji zacisku w Sassie można wykonać na dwa sposoby, oba są ściśle równoważne, ale jeden jest znacznie bardziej elegancki niż drugi. Zacznijmy od niezbyt wielkiego.
Brudny
Ta wersja opiera się na zagnieżdżonych ifwywołaniach funkcji. Zasadniczo mówimy: jeśli $numberjest niższe niż $min, to zachowaj $min, w przeciwnym razie jeśli $numberjest wyższe niż $max, to zachowaj $max, w przeciwnym razie zachowaj $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)); )Jeśli nie masz pewności co do zagnieżdżonych wywołań if, pomyśl o poprzedniej instrukcji jako:
@if $number $max ( @return $max; ) @return $number;Czysty
Ta wersja jest znacznie bardziej elegancka, ponieważ dobrze wykorzystuje zarówno funkcje, jak mini maxfunkcje 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); )Dosłownie oznacza utrzymanie minimum pomiędzy $maxa maksimum pomiędzy $numbera $min.
Przykład
Teraz stwórzmy małą mieszankę krycia tylko dla celów demonstracyjnych:
/// 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; )