V počítačové vědě používáme slovo clamp jako způsob, jak omezit číslo mezi dvěma dalšími čísly. Po upnutí si číslo buď zachová svoji vlastní hodnotu, pokud žije v rozsahu stanoveném dvěma dalšími hodnotami, vezme nižší hodnotu, pokud je zpočátku nižší než ona, nebo vyšší, pokud je zpočátku vyšší než ona.
Jako rychlý příklad, než půjdeme dále:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Vracíme se do CSS. Existuje několik způsobů, jak budete možná potřebovat omezit číslo mezi dvěma dalšími. Vezměte například opacityvlastnost: musí to být float (mezi 0 a 1). Toto je obvykle druh hodnoty, kterou byste chtěli upnout, abyste se ujistili, že není ani záporná, ani vyšší než 1.
Implementaci funkce svorky v Sassu lze provést dvěma způsoby, oba striktně ekvivalentní, ale jeden je mnohem elegantnější než druhý. Začněme tím ne tak skvělým.
Ten špinavý
Tato verze se spoléhá na ifvolání vnořených funkcí. V zásadě říkáme: pokud $numberje nižší než $min, pak zachovat $min, jinak pokud $numberje vyšší než $max, pak zachovat $max, jinak zachovat $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)); )Pokud si nejste jisti vnořenými voláními, myslete na předchozí příkaz jako:
@if $number $max ( @return $max; ) @return $number;Čistý
Tato verze je mnohem elegantnější, protože dobře využívá obě funkce mina maxfunkce od 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); )Doslovně znamená udržovat minimum mezi $maxa maximum mezi $numbera $min.
Příklad
Pojďme si nyní kvůli demonstraci vytvořit malý mix neprůhlednosti:
/// 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; )