Stezanje broja - CSS-trikovi

U računalnoj znanosti koristimo riječ stezaljka kao način za ograničavanje broja između dva druga broja. Kada je stegnut, broj će zadržati vlastitu vrijednost ako živi u rasponu koji su nametnute s dvije druge vrijednosti, uzet će nižu vrijednost ako je u početku niža od nje ili veću ako je u početku viša od nje.

Kao brzi primjer prije nego što krenemo dalje:

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

Vraćajući se na CSS. Postoji nekoliko načina na koje će vam možda trebati broj za ograničenje između druge dvije osobe. Uzmimo opacityza primjer svojstvo: ono mora biti plutajuće (između 0 i 1). To je obično vrsta vrijednosti koju biste željeli stegnuti kako biste bili sigurni da nije ni negativna ni veća od 1.

Implementacija stezne funkcije u Sass može se izvršiti na dva načina, oba strogo jednaka, ali jedan je puno elegantniji od drugog. Krenimo od one ne baš sjajne.

Onaj prljavi

Ova se verzija oslanja na ifpozive ugniježđenih funkcija. U osnovi kažemo: ako $numberje niže od $min, onda zadrži $min, inače ako $numberje veće od $max, onda zadrži $max, ostalo drž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)); )

Ako niste baš sigurni u ugniježđene pozive if, zamislite prethodnu izjavu kao:

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

Onaj čisti

Ova je verzija mnogo elegantnija jer dobro koristi obje funkcije mini maxSassove funkcije.

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

Doslovno znači zadržati minimum između $maxi maksimum između $numberi $min.

Primjer

Sada, hajde da napravimo malo mješavine neprozirnosti samo radi demonstracije:

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