@while

Die @while-Regel, geschrieben als @while <Ausdruck> { ... }, evaluiert ihren Block, wenn ihr Ausdruck true zurückgibt. Wenn ihr Ausdruck dann immer noch true zurückgibt, evaluiert sie ihren Block erneut. Dies wird fortgesetzt, bis der Ausdruck schließlich false zurückgibt.

Spielplatz

SCSS-Syntax

@use "sass:math";

/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}
Spielplatz

Sass-Syntax

@use "sass:math"

/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618)
  @while $value > $base
    $value: math.div($value, $ratio)
  @return $value



$normal-font-size: 16px
sup
  font-size: scale-below(20px, 16px)

CSS-Ausgabe

sup {
  font-size: 12.3609394314px;
}

⚠️ Vorsicht!

Obwohl @while für einige besonders komplexe Stylesheets notwendig ist, sind Sie normalerweise besser damit beraten, entweder @each oder @for zu verwenden, wenn eine davon funktioniert. Sie sind für den Leser klarer und oft auch schneller zu kompilieren.

Wahrheitswerte und FalschheitswerteWahrheitswerte und Falschheitswerte Permalink

Überall dort, wo true oder false erlaubt sind, können Sie auch andere Werte verwenden. Die Werte false und null sind *falsy*, was bedeutet, dass Sass sie als falsch interpretiert und Bedingungen fehlschlagen lässt. Jeder andere Wert gilt als *truthy*, sodass Sass ihn wie true behandelt und Bedingungen erfolgreich sein lässt.

Wenn Sie zum Beispiel prüfen möchten, ob ein String ein Leerzeichen enthält, können Sie einfach string.index($string, " ") schreiben. Die string.index()-Funktion gibt null zurück, wenn der String nicht gefunden wird, und eine Zahl andernfalls.

⚠️ Vorsicht!

Einige Sprachen betrachten mehr Werte als falsy, als nur false und null. Sass gehört nicht zu diesen Sprachen! Leere Strings, leere Listen und die Zahl 0 sind in Sass alle truthy.