Inom datavetenskap använder vi ordet klämma som ett sätt att begränsa ett tal mellan två andra nummer. När det är fastklämt kommer ett nummer antingen att behålla sitt eget värde om det lever i det intervall som åläggs av de två andra värdena, ta det lägre värdet om det ursprungligen är lägre än det, eller det högre om det ursprungligen är högre än det.
Som ett snabbt exempel innan du går vidare:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1
Kommer tillbaka till CSS. Det finns några sätt där du kan behöva ett nummer för att begränsas mellan två andra. Ta till exempel opacity
egenskapen: den måste vara en flottör (mellan 0 och 1). Detta är vanligtvis den typ av värde du vill klämma fast för att se till att det varken är negativt eller högre än 1.
Implementering av en klämfunktion i Sass kan göras på två sätt, båda är strikt likvärdiga, men den ena är mycket mer elegant än den andra. Låt oss börja med den inte så fantastiska.
Den smutsiga
Den här versionen är beroende av kapslade if
funktionssamtal. I grund och botten säger vi: om $number
är lägre än $min
, sedan behålla $min
, annars om $number
är högre än $max
, sedan behålla $max
, annars behålla $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)); )
Om du inte är mycket säker på att kapslade om samtal, tänk på föregående uttalande som:
@if $number $max ( @return $max; ) @return $number;
Den rena
Denna version är mycket mer elegant eftersom den använder både min
och max
funktioner från Sass på ett bra sätt .
/// 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); )
Bokstavligen betyder att hålla minimum mellan $max
och maximalt mellan $number
och $min
.
Exempel
Låt oss nu skapa en liten opacitetsblandning bara för demonstrationens skull:
/// 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; )