Klämma fast ett nummer - CSS-tricks

Anonim

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 opacityegenskapen: 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 iffunktionssamtal. 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 minoch maxfunktioner 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 $maxoch maximalt mellan $numberoch $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; )