SASS Schnellstart / SASS Schnellstart Modul 3 – SASS für Fortgeschrittene
0%
In Bearbeitung

SASS Schnellstart – While und Each Schleife

Bedingte Schleifen - @while

Die @if-Directive führt eine Reihe von Anweisungen ein einziges Mal aus, basierend auf einem booleschen Ausdruck. Wenn du hingegen die Anweisungen mehrfach ausführen möchtest, aber ihre Ausführung dennoch auf Basis einer Bedingung steuern willst, kannst du das @while-Directive verwenden. Wie der Name schon sagt, gibt das @while Directive weiterhin CSS aus, das von den Anweisungen erzeugt wird, solange die Bedingung wahr ist.

Die Syntax des @while Directives ist der von @if sehr ähnlich; ersetze einfach das Schlüsselwort:

Syntax @while-Directive:
@while <Boolean> { 
   <Statements>
}
Das einzige, worauf du achten musst, ist sicherzustellen, dass eine oder mehrere Anweisungen, die innerhalb der Schleife ausgewertet werden, das Ergebnis der Bedingung ändern. Andernfalls wird der Transpiler einfach weiter das CSS ausgeben, das durch die Anweisungen erzeugt wurde, bis du es manuell abbrichst. Mache also nicht dies: @while true { ... }. Dies wird für immer ausgeführt!!!

Hier ist ein besseres (wenn auch nicht furchtbar nützliches) Beispiel:

SCSS:
$p: 3;

@while $p < 5 { 
   .item-#{$p} { 
      color: red; 
      $p : $p + 1; 
   } 
}

CSS:

.item-3 { 
   color: red;
}

.item-4 { 
   color: red; 
}

@each

Schließlich führt das @each Directive eine Menge von Elementen entweder in einer Liste oder einer Map aus. Für solch eine mächtige Struktur ist die Syntax recht einfach:

Syntax:
@each <vars> in <Liste oder Map> { 
   <Statements>
}
Wie bei der @for-Directive wird der Variable nacheinander jeder Wert zugewiesen und kann innerhalb der Schleife referenziert werden. Lass uns mit einem einfachen Beispiel beginnen.
SCSS:
@each $s in (normal, bold, italic) {
  .#{$s} {
    font-weight: $s;
  }
}

Dieser Code wird das folgende CSS ausgeben.

CSS:
.normal {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.italic {
  font-weight: italic;
}

Du kannst auch eine mehrdimensionale Liste an das @each-Directive übergeben, indem du mehrere Variablen angibst, eine Technik, die Mehrfachzuweisung genannt wird.

SCSS:
@each $name,
$style,
$size in ((normal, bold, 10px), (emphasis, bold, 15px)) {
  .#{$name} {
    font-weight: $style;
    text-size: $size;
  }
}

Dieser Code wird zu folgendem CSS führen.

CSS:
.normal {
  font-weight: bold;
  font-size: 10px
}

.emphasis {
  font-weight: bold;
  font-size: 15px
}

Schließlich kannst du dem @each-Directive eine Map übergeben. Auch hier verwendest du eine Mehrfachzuweisung:

SCSS:
@each $name,
$style in(default: normal, emphasis: bold) {
  .#{$name} {
    font-weight: $style;
  }
}

Gibt folgenden CSS-Code aus.

CSS:
.default {
  font-weight: normal
}

.emphasis {
  font-weight: bold;
}

In dieser Lektion hast du gelern,t wie du die bedingte While-Schleife sowie die Each-Schleife in SASS einsetzen kannst. In der nächsten Lektion geht es um die Vererbung mit dem Extend Directive.