@if und @else

• SCSS
• Sass
• CSS

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

@else@else Permalink

Einer @if-Regel kann optional eine @else-Regel folgen, geschrieben als @else { ... }. Der Block dieser Regel wird ausgewertet, wenn der @if-Ausdruck false zurückgibt.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}

Spielplatz

Sass-Syntax

$light-background: #f2ece4
$light-text: #036
$dark-background: #6b717f
$dark-text: #d2e1dd

@mixin theme-colors($light-theme: true)
  @if $light-theme
    background-color: $light-background
    color: $light-text
  @else
    background-color: $dark-background
    color: $dark-text



.banner
  @include theme-colors($light-theme: true)
  body.dark &
    @include theme-colors($light-theme: false)

CSS-Ausgabe

.banner {
  background-color: #f2ece4;
  color: #036;
}
body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}

Bedingte Ausdrücke können boolesche Operatoren (and, or, not) enthalten.

@else if@else if Permalink

Sie können auch wählen, ob der Block einer @else-Regel ausgewertet werden soll, indem Sie sie als @else if <expression> { ... } schreiben. Wenn Sie dies tun, wird der Block nur ausgewertet, wenn der Ausdruck des vorhergehenden @if false zurückgibt *und* der Ausdruck des @else if true zurückgibt.

Tatsächlich können Sie beliebig viele @else ifs an eine @if-Anweisung anhängen. Der erste Block in der Kette, dessen Ausdruck true zurückgibt, wird ausgewertet und keine anderen. Wenn am Ende der Kette ein einfaches @else steht, wird sein Block ausgewertet, wenn alle anderen Blöcke fehlschlagen.

• SCSS
• Sass
• CSS

Spielplatz

SCSS-Syntax

@use "sass:math";

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: math.div($size, 2);

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}

Spielplatz

Sass-Syntax

@use "sass:math"

@mixin triangle($size, $color, $direction)
  height: 0
  width: 0

  border-color: transparent
  border-style: solid
  border-width: math.div($size, 2)

  @if $direction == up
    border-bottom-color: $color
  @else if $direction == right
    border-left-color: $color
  @else if $direction == down
    border-top-color: $color
  @else if $direction == left
    border-right-color: $color
  @else
    @error "Unknown direction #{$direction}."



.next
  @include triangle(5px, black, right)

CSS-Ausgabe

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

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.