数字钳位

在计算机科学中，我们使用“钳位”一词来表示将一个数字限制在另外两个数字之间。当一个数字被钳位时，如果它在另外两个值的范围内，则保持其自身的值；如果最初小于较低的值，则取较低的值；如果最初大于较高值，则取较高值。

在进一步讨论之前，我们先来看一个简单的例子

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

回到 CSS。在某些情况下，您可能需要将一个数字限制在另外两个数字之间。例如，opacity 属性必须是浮点数（介于 0 和 1 之间）。这通常是您希望钳位的值类型，以确保它既不为负数，也不大于 1。

在 Sass 中实现钳位函数可以通过两种方式完成，这两种方式在严格意义上是等价的，但其中一种比另一种更优雅。让我们先从不太好的方法开始。

不优雅的方法

此版本依赖于嵌套的 if 函数调用。基本上，我们说：如果 $number 小于 $min，则保留 $min；否则，如果 $number 大于 $max，则保留 $max；否则，保留 $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));
}

如果您对嵌套的 if 调用不太熟悉，可以将前面的语句理解为

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

@return $number;

优雅的方法

此版本更加优雅，因为它很好地利用了 Sass 中的 min 和 max 函数。

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

从字面上看，这意味着保留 $max 与 $number 和 $min 之间最大值之间的最小值。

示例

现在，让我们创建一个小的不透明度 mixin 作为演示。

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