@for

Die Regel @for, geschrieben @for <variable> from <expression> to <expression> { ... } oder @for <variable> from <expression> through <expression> { ... }, zählt von einer Zahl (dem Ergebnis des ersten Ausdrucks) zu einer anderen (dem Ergebnis des zweiten) hoch oder herunter und wertet für jede Zahl dazwischen einen Block aus. Jede Zahl auf dem Weg wird dem angegebenen Variablennamen zugewiesen. Wenn to verwendet wird, ist die Endzahl ausgeschlossen; wenn through verwendet wird, ist sie enthalten.

Spielplatz

SCSS-Syntax

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}
Spielplatz

Sass-Syntax

$base-color: #036

@for $i from 1 through 3
  ul:nth-child(3n + #{$i})
    background-color: lighten($base-color, $i * 5%)

CSS-Ausgabe

ul:nth-child(3n+1) {
  background-color: rgb(0, 63.75, 127.5);
}

ul:nth-child(3n+2) {
  background-color: rgb(0, 76.5, 153);
}

ul:nth-child(3n+3) {
  background-color: rgb(0, 89.25, 178.5);
}