Numeron kiinnittäminen - CSS-temppuja

Tietotekniikassa käytämme sanaa puristin keinona rajoittaa lukua kahden muun numeron välillä. Kiinnitettynä numero joko säilyttää oman arvonsa, jos se elää kahden muun arvon asettamalla alueella, ottaa pienemmän arvon, jos se on alun perin, tai korkeamman, jos se on alun perin sitä suurempi.

Nopea esimerkki ennen jatkamista:

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

Palataan CSS: ään. On olemassa muutamia tapoja, joissa saatat tarvita numeron rajoittamista kahden muun välillä. Otetaan esimerkiksi opacityominaisuus: sen on oltava kelluva (välillä 0 ja 1). Tämä on tyypillisesti sellainen arvo, jonka haluat kiinnittää varmistaaksesi, että se ei ole negatiivinen eikä suurempi kuin 1.

Kiinnitystoiminnon toteuttaminen Sassissa voidaan tehdä kahdella tavalla, molemmat ehdottomasti vastaavia, mutta toinen on paljon tyylikkäämpi kuin toinen. Aloitetaan ei niin hienosta.

Likainen

Tämä versio perustuu sisäkkäisiin iftoimintokutsuihin. Pohjimmiltaan sanomme: jos $numberon pienempi kuin $min, niin pidä $min, muuten jos $numberon korkeampi kuin $max, niin pidä $max, muuten pidä $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)); )

Jos et ole kovin luottavainen sisäkkäisten if-puheluiden kanssa, ajattele edellistä lausetta seuraavasti:

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

Puhdas

Tämä versio on paljon tyylikkäämpi, koska siinä hyödynnetään molempia minja maxSassin toimintoja hyvin.

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

Kirjaimellisesti tarkoittaa minimin pitämistä välillä $maxja suurinta välillä $numberja $min.

Esimerkki

Luodaan nyt pieni läpinäkyvyysseos vain esittelyn vuoksi:

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