@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; }

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;
}