Bloccare un numero - Trucchi CSS

In informatica, usiamo la parola clamp come un modo per limitare un numero tra due altri numeri. Quando è bloccato, un numero manterrà il proprio valore se vive nell'intervallo imposto dagli altri due valori, assumerà il valore inferiore se inizialmente inferiore a esso, o quello superiore se inizialmente superiore a esso.

Come rapido esempio prima di proseguire:

$clamp: clamp(42, $min: 0, $max: 1337); // 42 $clamp: clamp(42, $min: 1337, $max: 9000); // 1337 $clamp: clamp(42, $min: 0, $max: 1); // 1

Tornando ai CSS. Ci sono alcuni modi in cui potrebbe essere necessario limitare un numero tra altri due. Prendiamo opacityad esempio la proprietà: deve essere un float (tra 0 e 1). Questo è in genere il tipo di valore che vorresti bloccare per assicurarti che non sia né negativo né superiore a 1.

L'implementazione di una funzione clamp in Sass può essere eseguita in due modi, entrambi strettamente equivalenti ma uno è molto più elegante dell'altro. Cominciamo con quello non così eccezionale.

Quello sporco

Questa versione si basa su ifchiamate di funzioni annidate . Fondamentalmente diciamo: se $numberè minore di $min, allora mantieni $min, altrimenti se $numberè maggiore di $max, allora mantieni $max, altrimenti mantieni $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)); )

Se non sei molto sicuro delle chiamate if annidate, pensa all'istruzione precedente come:

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

Quello pulito

Questa versione è molto più elegante dal momento che rende un buon uso di entrambi mine maxfunzioni da 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); )

Letteralmente significa mantenere il minimo tra $maxe il massimo tra $numbere $min.

Esempio

Ora, creiamo un piccolo mix di opacità solo per motivi di dimostrazione:

/// 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; )