Upnutie čísla Triky CSS

V informatike používame slovo svorka ako spôsob obmedzenia čísla medzi dvoma ďalšími číslami. Ak je číslo obmedzené, číslo si zachová svoju vlastnú hodnotu, ak žije v rozsahu určenom dvoma ďalšími hodnotami, vezme nižšiu hodnotu, ak je pôvodne nižšia, alebo vyššiu, ak je pôvodne vyššia ako táto hodnota.

Ako rýchly príklad, ako ísť ďalej:

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

Vraciam sa k CSS. Existuje niekoľko spôsobov, ako budete musieť obmedziť číslo medzi dvoma ďalšími. Vezmime si opacitynapríklad vlastnosť: musí to byť plavák (medzi 0 a 1). Toto je zvyčajne druh hodnoty, ktorú by ste chceli dosiahnuť, aby ste sa uistili, že nie je ani záporná, ani vyššia ako 1.

Implementáciu funkcie svorky v nástroji Sass je možné vykonať dvoma spôsobmi, ktoré sú striktne ekvivalentné, ale jeden je oveľa elegantnejší ako druhý. Začnime tým nie tak skvelým.

Ten špinavý

Táto verzia sa spolieha na vnorené ifvolania funkcií. V zásade hovoríme: ak $numberje nižšie ako $min, potom ponechajte $min, iné ak $numberje vyššie ako $max, potom ponechajte $max, iné ponechajte $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)); )

Ak si nie ste istí vnorenými hovormi if, myslite na predchádzajúce vyhlásenie ako:

@if $number $max ( @return $max; ) @return $number;

Čistý

Táto verzia je oveľa elegantnejšia, pretože dobre využíva obe funkcie mina maxfunkcie od spoločnosti 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); )

Doslova znamená udržiavať minimum medzi $maxa maximum medzi $numbera $min.

Príklad

Poďme si teraz kvôli demonštrácii vytvoriť malý mix opacity:

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