@for

@for 循环规则写成 @for <variable> from <expression> to <expression> {...} ,或者, @for <variable> from <expression> through <expression> {...} 。从一个数字(第一个表达式的结果)向上或向下计数到另一个数字(第二个表达式的结果),并为中间的每个数字计算一个块。沿途的每个数字都分配给,给定的变量名。如果使用 to ,则不包括最终数字;如果使用 through ,则包括在内。

scss 语句 css 语句
$base-color: #036;

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

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

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

上篇: @each

下篇: @while