@for

的@for规则，书面@for <variable> from <expression> to <expression> { ... }或@for <variable> from <expression> through <expression> { ... }，或向上计数从一个号码（第一的结果向下表达）到另一（第二个）的结果和评价在之间的每个号码的块。沿途的每个数字都分配给给定的变量名称。如果to使用，则排除最终号码；如果through使用，则包含在内。

SCSS
Sass
css
SCSS  语法$base-color: #036;

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




Sass语法$base-color: #036

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






CSS  输出ul:nth-child(3n + 1) {
  background-color: #004080;
}

ul:nth-child(3n + 2) {
  background-color: #004d99;
}

ul:nth-child(3n + 3) {
  background-color: #0059b3;
}