В компютърните науки използваме думата clamp като начин за ограничаване на числото между две други числа. Когато е закрепен, числото или ще запази собствената си стойност, ако живее в диапазона, наложен от другите две стойности, ще вземе по-ниската стойност, ако първоначално е по-ниска от нея, или по-високата, ако първоначално е по-висока от нея.
Като бърз пример, преди да продължите по-нататък:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Връщайки се към CSS. Има няколко начина, при които може да се наложи номер да бъде ограничен между двама други. Вземете например opacityсвойството: то трябва да е с поплавък (между 0 и 1). Това обикновено е видът стойност, който бихте искали да затегнете, за да сте сигурни, че не е нито отрицателен, нито по-висок от 1.
Внедряването на затягаща функция в Sass може да се направи по два начина, и двата строго еквивалентни, но единият е много по-елегантен от другия. Да започнем с не толкова страхотния.
Мръсната
Тази версия разчита на ifизвиквания на вложени функции. По принцип казваме: ако $numberе по-ниско от $min, тогава пази $min, иначе ако $numberе по-високо от $max, тогава пази $max, иначе пази $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)); )Ако не сте много уверени с вложени повиквания if, помислете за предишното изявление като:
@if $number $max ( @return $max; ) @return $number;Чистият
Тази версия е много по-елегантна, тъй като използва добре minи двете, и maxфункциите на 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); )Буквално означава да запазите минимума между $maxи максимума между $numberи $min.
Пример
Сега, нека създадем малко смесване на непрозрачност само за демонстрация:
/// 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; )