Зажим числа - CSS-хитрости

В информатике мы используем слово «зажим» как способ ограничить число двумя другими числами. При ограничении число будет либо сохранять свое собственное значение, если оно находится в диапазоне, наложенном двумя другими значениями, принимать более низкое значение, если оно изначально ниже, либо более высокое, если изначально оно было выше.

В качестве быстрого примера перед тем, как продолжить:

$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и maxSass.

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