Sujeción de un número | Programar Plus

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 un 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 puede necesitar que un número esté restringido entre otros dos. toma el opacity propiedad por ejemplo: debe ser un flotante (entre 0 y 1). Este suele ser el tipo de valor que le gustaría fijar para asegurarse de que no sea negativo ni superior a 1.

La implementación de una función de abrazadera 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 anidado if llamadas de función. Básicamente decimos: si $number es mas bajo que $min, entonces mantén $min, si no $number es más alto que $max, entonces mantén $max, de lo contrario mantener $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 < $min, $min, if($number > $max, $max, $number));
}

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

@if $number < $min {
  @return $min;
} @else if $number > $max {
  @return $max;
}

@return $number;

el limpio

Esta versión es mucho más elegante ya que hace un buen uso de ambos min y max funciones de 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 $max y el máximo entre $number y $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;
}