Sujetar un número - Trucos CSS

En informática, usamos la palabra abrazadera como una forma de restringir un número entre otros dos números. Cuando se fija, un número mantendrá su propio valor si vive en el rango impuesto por los otros dos valores, tomará el valor más bajo si inicialmente es más bajo que él, o el más alto si inicialmente es más alto que él.

Como ejemplo rápido antes de continuar:

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

Volviendo a CSS. Hay algunas formas en las que es posible que necesite restringir un número entre otros dos. Tome la opacitypropiedad, por ejemplo: debe ser un flotante (entre 0 y 1). Por lo general, este es el tipo de valor que desea fijar para asegurarse de que no sea negativo ni superior a 1.

La implementación de una función de sujeción en Sass se puede hacer de dos maneras, ambas estrictamente equivalentes, pero una es mucho más elegante que la otra. Comencemos con el no tan bueno.

El sucio

Esta versión se basa en ifllamadas a funciones anidadas . Básicamente decimos: si $numberes menor que $min, entonces se mantiene $min, de lo contrario si $numberes mayor que $max, entonces se mantiene $max, si no se mantiene $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)); )

Si no está muy seguro con las llamadas if anidadas, piense en la declaración anterior como:

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

El limpio

Esta versión es mucho más elegante ya que hace un buen uso de ambas funciones miny maxde 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); )

Literalmente significa mantener el mínimo entre $maxy el máximo entre $numbery $min.

Ejemplo

Ahora, creemos una pequeña mezcla de opacidad solo por el bien de la demostración:

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