In der Informatik verwenden wir das Wort Clamp, um eine Zahl zwischen zwei anderen Zahlen einzuschränken. Wenn eine Zahl geklemmt ist, behält sie entweder ihren eigenen Wert, wenn sie in dem Bereich lebt, der durch die beiden anderen Werte vorgegeben ist, und nimmt den niedrigeren Wert, wenn sie anfänglich niedriger ist, oder den höheren, wenn sie anfänglich höher ist.
Als kurzes Beispiel, bevor Sie fortfahren:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Zurück zu CSS. Es gibt einige Möglichkeiten, wie Sie eine Nummer benötigen, um sie auf zwei andere zu beschränken. Nehmen wir opacityzum Beispiel die Eigenschaft: Es muss ein Float sein (zwischen 0 und 1). Dies ist normalerweise die Art von Wert, die Sie klemmen möchten, um sicherzustellen, dass er weder negativ noch höher als 1 ist.
Das Implementieren einer Klemmfunktion in Sass kann auf zwei Arten erfolgen, wobei beide streng gleichwertig sind und eine viel eleganter als die andere ist. Beginnen wir mit dem nicht so großartigen.
Der Dreckige
Diese Version basiert auf verschachtelten ifFunktionsaufrufen. Grundsätzlich sagen wir: Wenn $numberniedriger als $min, dann behalten $min, sonst wenn $numberhöher als $max, dann behalten $max, sonst behalten $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)); )Wenn Sie mit verschachtelten if-Aufrufen nicht sehr sicher sind, stellen Sie sich die vorherige Anweisung wie folgt vor:
@if $number $max ( @return $max; ) @return $number;Der saubere
Diese Version ist viel eleganter, da sie beide minund maxFunktionen von Sass gut nutzt .
/// 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); )Wörtlich bedeutet, das Minimum zwischen $maxund das Maximum zwischen $numberund zu halten $min.
Beispiel
Lassen Sie uns nun ein kleines Opazitätsmixin erstellen, um es zu demonstrieren:
/// 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; )