În informatică, folosim cuvântul clamp ca o modalitate de a restricționa un număr între alte două numere. Când este blocat, un număr fie își păstrează propria valoare dacă trăiește în intervalul impus de celelalte două valori, ia valoarea inferioară dacă este inițial mai mică decât aceasta, sau cea mai mare dacă inițial este mai mare decât aceasta.
Ca un exemplu rapid înainte de a merge mai departe:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Revenind la CSS. Există câteva moduri în care este posibil să aveți nevoie de un număr care să fie restricționat între alte două. Luați opacityproprietatea, de exemplu: trebuie să fie un float (între 0 și 1). Acesta este de obicei tipul de valoare pe care ați dori să o fixați pentru a vă asigura că nu este nici negativă, nici mai mare decât 1.
Implementarea unei funcții clemă în Sass se poate face în două moduri, ambele strict echivalente, dar una este mult mai elegantă decât cealaltă. Să începem cu cea nu atât de grozavă.
Cel murdar
Această versiune se bazează pe ifapeluri de funcții imbricate . Practic spunem: dacă $numbereste mai mic decât $min, atunci păstrează $min, altfel dacă $numbereste mai mare decât $max, atunci păstrează $max, altfel păstrează $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)); )Dacă nu sunteți foarte încrezători în apelurile imbricate if, gândiți-vă la declarația anterioară ca:
@if $number $max ( @return $max; ) @return $number;Cea curată
Această versiune este mult mai elegant , deoarece face o bună utilizare atât minși maxfuncții de la 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); )Literal înseamnă a păstra minimul între $maxși maxim între $numberși $min.
Exemplu
Acum, să creăm un mic amestec de opacitate doar pentru a demonstra:
/// 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; )