I informatikk bruker vi ordet klemme som en måte å begrense et tall mellom to andre tall. Når det er fastspent, vil et tall enten beholde sin egen verdi hvis det lever i området som er pålagt av de to andre verdiene, tar den lavere verdien hvis den var lavere enn den, eller den høyere hvis den opprinnelig var høyere enn den.
Som et raskt eksempel før du går videre:
$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1Kommer tilbake til CSS. Det er noen måter du kan trenge et nummer for å være begrenset mellom to andre. Ta opacityeiendommen for eksempel: den må være en flottør (mellom 0 og 1). Dette er vanligvis den verdien du vil klemme for å sikre at den ikke er negativ eller høyere enn 1.
Implementering av en klemfunksjon i Sass kan gjøres på to måter, begge strengt likeverdige, men den ene er mye mer elegant enn den andre. La oss starte med den ikke så flotte.
Den skitne
Denne versjonen er avhengig av nestede iffunksjonsanrop. I utgangspunktet sier vi: hvis $numberer lavere enn $min, så beholder $min, annet hvis $numberer høyere enn $max, så beholder $max, ellers beholder $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)); )Hvis du ikke er veldig trygg på nestede hvis du ringer, kan du tenke på forrige uttalelse som:
@if $number $max ( @return $max; ) @return $number;Den rene
Denne versjonen er mye mer elegant siden den bruker både minog maxfunksjoner fra 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); )Bokstavelig talt betyr å holde minimum mellom $maxog maksimalt mellom $numberog $min.
Eksempel
La oss lage en liten opasitetsblanding bare for demonstrasjonens skyld:
/// 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; )