Стезање броја - ЦСС-трикови

У рачунарству користимо реч стезаљка као начин за ограничавање броја између два друга броја. Када је стегнут, број ће задржати сопствену вредност ако живи у опсегу који намећу две друге вредности, узеће нижу вредност ако је у почетку нижа од ње, или већу ако је у почетку већа од ње.

Као брзи пример пре него што кренемо даље:

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

Враћајући се на ЦСС. Постоји неколико начина на које ће вам можда требати број за ограничење између два друга. Узмимо на opacityпример својство: оно мора бити флоат (између 0 и 1). Ово је обично врста вредности коју бисте желели да стегнете како бисте били сигурни да није ни негативна ни већа од 1.

Имплементација стезне функције у Сасс-у може се обавити на два начина, оба строго еквивалентна, али један је много елегантнији од другог. Кренимо од оне не баш сјајне.

Онај прљави

Ова верзија се ослања на угнежђене 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 $number $max ( @return $max; ) @return $number;

Онај чисти

Ова верзија је много елегантнија јер добро користи обе функције minи maxфункције компаније Сасс.

/// 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; )