Vpenjanje številke - CSS-triki

V računalništvu besedo clamp uporabljamo kot način za omejitev števila med dvema drugima številkama. Ko je število vpeto, bo bodisi ohranilo svojo vrednost, če živi v obsegu, ki ga nalagata drugi dve vrednosti, vzame nižjo vrednost, če je sprva nižja od nje, ali višjo, če je sprva višja od nje.

Kot hiter primer pred nadaljevanjem:

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

Vrnitev v CSS. Obstaja nekaj načinov, ko boste morda potrebovali omejitev številke med dvema drugima. opacityZa primer vzemite lastnost: mora biti float (med 0 in 1). To je običajno vrsta vrednosti, ki jo želite vpeti, da zagotovite, da ni niti negativna niti višja od 1.

Izvedbo vpenjalne funkcije v Sassu lahko izvedemo na dva načina, ki sta popolnoma enakovredna, vendar je eden veliko bolj eleganten od drugega. Začnimo z ne tako velikim.

Umazani

Ta različica se opira na ugnezdene ifklice funkcij. V bistvu pravimo: če $numberje nižje od $min, potem obdrži $min, sicer če $numberje višje od $max, potem obdrži $max, sicer obdrži $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)); )

Če niste preveč samozavestni z gnezdenimi klici, pomislite na prejšnji stavek kot:

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

Čista

Ta različica je veliko bolj elegantna, saj dobro izkorišča oboje minin maxfunkcije podjetja 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); )

Dobesedno pomeni, da naj bo najmanj med $maxin največ med $numberin $min.

Primer

Zdaj pa ustvarimo malo mešanice motnosti samo zaradi predstavitve:

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