Eine Zahl begrenzen

In der Informatik verwenden wir das Wort beschränken (clamp), um eine Zahl zwischen zwei anderen Zahlen einzuschränken. Wenn eine Zahl beschränkt wird, behält sie entweder ihren eigenen Wert, wenn sie im von den beiden anderen Werten vorgegebenen Bereich liegt, nimmt den unteren Wert an, wenn sie ursprünglich kleiner ist, oder den oberen Wert, wenn sie ursprünglich größer ist.

Als kurzes Beispiel, bevor wir weitergehen

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

Zurück zu CSS. Es gibt einige Möglichkeiten, bei denen eine Zahl zwischen zwei anderen eingeschränkt werden muss. Nehmen Sie zum Beispiel die Eigenschaft opacity: Sie muss ein Float sein (zwischen 0 und 1). Dies ist typischerweise die Art von Wert, die Sie beschränken möchten, um sicherzustellen, dass sie weder negativ noch höher als 1 ist.

Die Implementierung einer Beschränkungsfunktion in Sass kann auf zwei Arten erfolgen, beide sind streng äquivalent, aber eine ist weitaus eleganter als die andere. Beginnen wir mit der nicht so tollen.

Die dreckige Variante

Diese Version basiert auf verschachtelten if-Funktionsaufrufen. Grundsätzlich sagen wir: Wenn $number kleiner als $min ist, behalte $min, sonst wenn $number größer als $max ist, behalte $max, sonst behalte $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));
}

Wenn Sie sich bei verschachtelten if-Aufrufen nicht sehr sicher sind, denken Sie an die vorherige Aussage als

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

@return $number;

Die saubere Variante

Diese Version ist viel eleganter, da sie sowohl die Funktionen min als auch max von Sass gut nutzt.

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

Bedeutet wörtlich: Nimm das Minimum zwischen $max und dem Maximum zwischen $number und $min.

Beispiel

Lassen Sie uns nun ein kleines Opacity-Mixin nur zur Demonstration erstellen

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