Skaičio užspaudimas - CSS-gudrybės

Informatikoje mes naudojame žodį „clamp“ kaip būdą apriboti skaičių tarp dviejų kitų skaičių. Užfiksuotas skaičius arba išlaikys savo vertę, jei gyvena dviejų kitų verčių nustatytame diapazone, ims mažesnę vertę, jei ji iš pradžių mažesnė, arba didesnę, jei iš pradžių didesnė už ją.

Trumpas pavyzdys prieš einant toliau:

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

Grįžtame prie CSS. Yra keli būdai, kai jums gali reikėti apriboti skaičių tarp dviejų kitų. Paimkime opacity, pavyzdžiui, nuosavybę: ji turi būti plūdė (tarp 0 ir 1). Paprastai tai yra tokia vertė, kurią norėtumėte užfiksuoti, kad įsitikintumėte, jog ji nėra nei neigiama, nei didesnė nei 1.

„Sass“ spaustuko funkciją galima įgyvendinti dviem būdais, abu griežtai lygiaverčiai, tačiau vienas yra daug elegantiškesnis nei kitas. Pradėkime nuo ne tokio puikaus.

Purvinas

Ši versija remiasi įdėtais iffunkcijų iškvietimais. Iš esmės mes sakome: jei $numberyra mažesnis nei $min, tada laikyk $min, dar jei $numberyra didesnis $max, tada laikyk $max, dar laikyk $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)); )

Jei nesate labai tikras dėl įterptųjų skambučių, galvokite apie ankstesnį teiginį:

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

Švarus

Ši versija yra kur kas elegantiškesnė, nes ji gerai naudoja abi „ Sass“ funkcijas minir maxfunkcijas.

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

Pažodžiui reiškia išlaikyti minimalų tarp $maxir maksimalų tarp $numberir $min.

Pavyzdys

Dabar, sukurkime šiek tiek nepermatomumo mišinį, kad būtų galima parodyti:

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