Закрепление номера онлайн урок.


В информатике мы используем слово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 может быть выполнена двумя способами, как строго эквивалентными, так и одними из них гораздо более элегантными, чем другие, Начнем с не очень большой.

# Грязный

Эта версия использует вложенные , если вызовы функций. В основном мы говорим: если$ 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 < $min, $min, if($number > $max, $max, $number));
}

Если вы не очень уверены в вложенных вызовах, подумайте о предыдущем утверждении как:

@if $number < $min {
@return $min;
} @else 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;
}