A számítástechnikában a bilincs szót használjuk arra, hogy korlátozzunk egy számot két másik szám között. Megszorításkor egy szám vagy megőrzi saját értékét, ha a két másik érték által előírt tartományban él, akkor az alacsonyabb értéket veszi fel, ha kezdetben alacsonyabb, vagy a magasabbat, ha kezdetben magasabb.
Gyors példaként a továbblépés előtt:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Visszatérve a CSS-re. Van néhány mód, ahol szükség lehet egy szám korlátozására két másik között. Vegyük opacitypéldául a tulajdonságot: úszónak kell lennie (0 és 1 között). Ez általában az a fajta érték, amelyet rögzíteni szeretne, hogy megbizonyosodjon arról, hogy az nem negatív vagy magasabb-e, mint 1.
A szorító funkció Sass-ban kétféle módon valósítható meg, szigorúan egyenértékűek, de az egyik sokkal elegánsabb, mint a másik. Kezdjük a nem túl nagyszerűvel.
A piszkos
Ez a verzió beágyazott iffüggvényhívásokra támaszkodik . Alapvetően azt mondjuk: ha $numberalacsonyabb, mint $min, akkor tartsuk meg $min, különben, ha $numbermagasabb $max, akkor tartsuk meg $max, mást tartsunk meg $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)); )Ha nem túl magabiztos a beágyazott hívások esetén, gondolja az előző állításra:
@if $number $max ( @return $max; ) @return $number;A tiszta
Ez a verzió sokkal elegánsabb, mivel ez teszi egy jó hasznát egyaránt minés maxfunkciók 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); )Szó szerint azt jelenti, hogy tartsuk a minimumot a $maxés a maximum között, $numberés $min.
Példa
Most készítsünk egy kis átlátszatlansági keveréket a bemutatás kedvéért:
/// 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; )