Fastspænding af et tal - CSS-tricks

I datalogi bruger vi ordet klemme som en måde at begrænse et tal mellem to andre tal. Når det er fastspændt, vil et tal enten beholde sin egen værdi, hvis det lever i det område, der er pålagt af de to andre værdier, tager den lavere værdi, hvis den oprindeligt er lavere end den, eller den højere, hvis den oprindeligt er højere end den.

Som et hurtigt 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); // 1

Kommer tilbage til CSS. Der er et par måder, hvor du muligvis har brug for et nummer, der skal begrænses mellem to andre. Tag opacityejendommen for eksempel: den skal være en float (mellem 0 og 1). Dette er typisk den slags værdi, du gerne vil klemme for at sikre, at den hverken er negativ eller højere end 1.

Implementering af en klemfunktion i Sass kan gøres på to måder, begge strengt ækvivalente, men den ene er meget mere elegant end den anden. Lad os starte med den ikke så store.

Den beskidte

Denne version er afhængig af indlejrede iffunktionsopkald. Grundlæggende siger vi: hvis $numberer lavere end $min, så hold $min, ellers hvis $numberer højere end $max, så hold $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 særlig fortrolig med indlejrede hvis opkald, så tænk på den foregående erklæring som:

@if $number $max ( @return $max; ) @return $number;

Den rene

Denne version er meget mere elegant, da den gør en god brug af både minog maxfunktioner 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); )

Bogstaveligt betyder betyder at holde minimumet mellem $maxog det maksimale mellem $numberog $min.

Eksempel

Lad os nu oprette en lille opacitet mixin bare for demonstrationens 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; )