SASS Schnellstart – For-Schleife

Da Sass komplexe Datenstrukturen wie Listen und Maps bereitstellt, ist es keine Überraschung, dass es auch eine Möglichkeit für Autoren gibt, über diese Entitäten zu iterieren.

Allerdings impliziert das Vorhandensein von Schleifen normalerweise eine mäßig komplexe Logik, die wahrscheinlich nicht zu Sass gehört. Bevor du eine Schleife verwendest, vergewissere dich, dass sie Sinn macht und dass sie tatsächlich ein Problem löst.

Unbedingte Schleifen - @for

Du kannst die @for-Directive verwenden, um eine Gruppe von Anweisungen eine bestimmte Anzahl von Malen auszuführen. Es gibt zwei Varianten. Die erste, die das through-Schlüsselwort verwendet, führt die Anweisungen von <start> bis <end> aus, inklusive.

Syntax:

@for <var>from <start>through <end> {
  <Statements>
}

Im folgenden Beispiel werden die Schleifenanweisungen also 10 Mal ausgeführt. Beachte die Verwendung der String-Interpolation, um die Variable $i zu referenzieren:

@for $i from 1 through 5 {
  .liste-#{$i} {
    width: 2px * $i;
  }
}

.liste-1 {
  margin-left: 2px
}

.liste-2 {
  margin-left: 4px
}

.liste-3 {
  margin-left: 6px
}

.liste-4 {
  margin-left: 8px
}

.liste-5 {
  margin-left: 10px
}

Das Ersetzen des through Schlüsselwortes durch to macht die Schleife exklusiv, d.h. sie wird nicht ausgeführt, wenn die Variable gleich <end> ist :

@for $i from 1 to 5 {
  .liste-#{$i} {
    width: 2px * $i;
  }
}

CSS:

.liste-1 {
  margin-left: 2px
}

.liste-2 {
  margin-left: 4px
}

.liste-3 {
  margin-left: 6px
}

.liste-4 {
  margin-left: 8px
}

Die durch <start> und <end> angegebenen Werte müssen Dezimalwerte sein, aber <start> muss nicht kleiner als <end> sein. Wenn nicht, wird der Wert der Variable dekrementiert statt inkrementiert:

@for $i from 5 to 1 {
  .liste-#{$i} {
    width: 2px * $i;
  }
}

.list-5 {
  margin-left: 2px
}

.list-4 {
  margin-left: 4px
}

.list-3 {
  margin-left: 6px
}

.list-2 {
  margin-left: 8px
}

.list-1 {
  margin-left: 10px
}

Du hast jetzt gelernt, wie du die For-Schleife in SASS einsetzt. In der nächsten Lektion geht es um zwei weitere Schleifen: While und Each.