Booleans

Booleans sind die logischen Werte true und false. Zusätzlich zu ihren literalen Formen werden Booleans von Gleichheitsoperatoren und relationale Operatoren zurückgegeben, sowie von vielen eingebauten Funktionen wie math.comparable() und map.has-key().

Spielplatz

SCSS-Syntax

@use "sass:math";

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug math.comparable(100px, 3in); // true
Spielplatz

Sass-Syntax

@use "sass:math"

@debug 1px == 2px  // false
@debug 1px == 1px  // true
@debug 10px < 3px  // false
@debug math.comparable(100px, 3in)  // true

Sie können mit Booleans mithilfe von Booleschen Operatoren arbeiten. Der and-Operator gibt true zurück, wenn beide Seiten true sind, und der or-Operator gibt true zurück, wenn eine der Seiten true ist. Der not-Operator gibt das Gegenteil eines einzelnen Booleschen Wertes zurück.

Spielplatz

SCSS-Syntax

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

@debug not true; // false
@debug not false; // true
Spielplatz

Sass-Syntax

@debug true and true  // true
@debug true and false  // false

@debug true or false  // true
@debug false or false  // false

@debug not true  // false
@debug not false  // true

Booleans verwendenBooleans verwenden Permalink

Sie können Booleans verwenden, um zu entscheiden, ob verschiedene Dinge in Sass getan werden sollen oder nicht. Die Regel @if wertet einen Stilblock aus, wenn sein Argument true ist.

Spielplatz

SCSS-Syntax

@use "sass:math";

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: math.div($size, 2);
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}
Spielplatz

Sass-Syntax

@use "sass:math"

@mixin avatar($size, $circle: false)
  width: $size
  height: $size

  @if $circle
    border-radius: math.div($size, 2)



.square-av
  @include avatar(100px, $circle: false)

.circle-av
  @include avatar(100px, $circle: true)

CSS-Ausgabe

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

Die Funktion if() gibt einen Wert zurück, wenn ihr Argument true ist, und einen anderen, wenn ihr Argument false ist.

Spielplatz

SCSS-Syntax

@debug if(true, 10px, 30px); // 10px
@debug if(false, 10px, 30px); // 30px
Spielplatz

Sass-Syntax

@debug if(true, 10px, 30px)  // 10px
@debug if(false, 10px, 30px)  // 30px

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.