Затискання номера - 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та 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; )