Articles
Einführung in SASS/SCSS
Iteration in SASS

Iteration in SASS

Dieser Artikel erklärt, wie man mit Iterationen in SASS umgeht.

Wir erklären Schritt für Schritt, wie man in SASS Iterationen durchführt, und zeigen dabei echte Code-Beispiele.

YouTube Video

Iteration in SASS

Iteration in SASS hilft, Code-Duplikate zu vermeiden und ermöglicht die Erstellung flexibler und wiederverwendbarer Styles.

Gründe für die Verwendung von Iterationen in SASS

Es gibt mehrere Vorteile bei der Verwendung von Iterationen, wie zum Beispiel:.

  • Die Wiederverwendbarkeit des Codes wird verbessert und ähnliche Style-Muster lassen sich leicht erzeugen.
  • Die Wartbarkeit wird erhöht, da sich Styles einfacher auf einmal ändern lassen.
  • Auch Fehler werden reduziert.

Zum Beispiel können Sie auf einmal Styles für Buttons mit verschiedenen Farben oder Komponenten mit mehreren Größen generieren.

Syntax für Iterationen in SASS

Die wichtigste Syntax für Iterationen in SASS ist wie folgt:.

  • Mit @for können Sie Iterationen über einen festgelegten Zahlenbereich durchführen.
  • Mit @each können Sie innerhalb einer Iteration über Listen oder Maps iterieren.
  • Mit @while können Sie so lange iterieren, bis eine bestimmte Bedingung erfüllt ist.

Iteration mit @for

@for führt wiederholte Prozesse innerhalb eines angegebenen Zahlenbereichs aus.

Syntax 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Geben Sie den Start- und Endwert für <start> und <end> an. Mit to wird der Endwert ausgeschlossen, während through ihn einschließt.

Beispiel

Der folgende Code erzeugt automatisch Klassen, bei denen die Rahmenbreite jeweils um 1px zunimmt.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Dieser Code erzeugt automatisch Klassen für Rahmenstärken, die jeweils um 1px zunehmen. Die @for-Direktive wird hier verwendet, um von 1 bis 5 zu iterieren.

Erzeugtes CSS 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • Die Klassen von .border-1 bis .border-5 werden nacheinander erstellt, wobei jede Rahmenstärke um 1px zunimmt.

Iteration mit @each

@each iteriert über Listen oder Maps. Das ist nützlich, wenn Sie effizient wiederkehrende Klassen erzeugen möchten.

Syntax 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Beispiel 1: Verwendung einer Liste

Der folgende Code erzeugt mehrere Klassen für Textfarben.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Dieser Code erzeugt automatisch für jede Farbe in der Liste eine Textfarb-Klasse. Mit der @each-Direktive wird jeder Wert in der Liste nacheinander verarbeitet.

Erzeugtes CSS 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Nach dem Kompilieren zu CSS werden für jede Farbe in der Liste Klassen wie .text-red, .text-blue und .text-green erzeugt.

Beispiel 2: Verwendung einer Map

Mit einer Map können Sie Schlüssel-Wert-Paare verwalten. Im folgenden Beispiel werden Hintergrundfarben von Buttons mit Hilfe einer Map definiert.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

Erzeugtes CSS 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • Nach dem Kompilieren der SASS-Datei werden für jeden Schlüssel in der Map Klassen wie .bg-primary, .bg-success oder .bg-danger erzeugt.

Iteration mit @while

@while führt die Schleife aus, solange die Bedingung wahr ist.

Syntax 

1/*
2@while <condition> {
3  ...
4}
5*/

Beispiel

Wenn Sie zum Beispiel die Schriftgröße schrittweise erhöhen wollen, können Sie das wie folgt schreiben:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Sie können die @while-Direktive verwenden, um die Schriftgröße schrittweise zu erhöhen. Durch die Verwendung der Variable $i werden Klassen automatisch für die Werte von 1 bis 5 generiert.

Erzeugtes CSS 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • Nach dem Kompilieren der SASS-Datei werden automatisch Klassen mit Schriftgrößen von 1rem bis 5rem generiert.

Fortgeschrittenes Beispiel: Kombination von Iteration und Verschachtelung

Die Kombination von Iteration mit der Verschachtelungs-Funktion von SASS ermöglicht noch anspruchsvollere Stil-Generierungen.

Beispiel

Unten sehen Sie ein Beispiel, bei dem Hintergrund- und Hoverfarben für Buttons gemeinsam definiert werden.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • Durch die Kombination von Iterationen und SASS-Verschachtelung können Sie Schaltflächenhintergrundfarben und Hover-Farben auf einmal generieren. Für jede Farbe in der Map wird eine .btn--Klasse erstellt und der :hover-Stil mithilfe von Verschachtelung definiert.

Erzeugtes CSS 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • Wenn Sie die SASS-Datei in CSS konvertieren, werden die Hintergrundfarbe und die Hover-Farbe für jede Schaltfläche automatisch generiert, und die :hover-Stile werden mithilfe von Verschachtelung gemeinsam definiert.

Wichtige Hinweise zur Verwendung von Iterationen

Beachten Sie beim Verwenden von Iterationen die folgenden Punkte, um effizienteren und besser lesbaren Code zu schreiben.

  1. Vermeiden Sie zu tiefe Verschachtelungen Zu starke Verschachtelung verringert die Lesbarkeit, daher sollten Sie diese aufs Nötigste beschränken.

  2. Beachten Sie Performance-Auswirkungen Wenn durch Iterationen zu viele Klassen erzeugt werden, kann Ihr CSS unnötig groß werden.

  3. Verwenden Sie sinnvolle Variablennamen Vergeben Sie bei Variablen wie $i oder $item möglichst aussagekräftige Namen, um den Code verständlicher zu machen.

Zusammenfassung

Durch die Verwendung von Iterationen in SASS können Sie effiziente und wartbare Styles entwerfen. Insbesondere durch die gezielte Wahl zwischen @for, @each und @while können Sie dynamisches und flexibles CSS erzeugen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Die `if`-Funktion in SASS