@for 流程控制语句

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

语法

这个指令包含两种格式：

@for $var from <start> through <end> ;

或者

@for $var from <start> to <end>

区别在于 through 与 to 的含义：

• 当使用 through 时，条件范围包含 <start> 与 <end> 的值
• 而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。

另外，$var 可以是任何变量，比如 $i<start> 和 <end> 必须是整数值。

to 示例

@for $i from 1 to 5 {
  .p#{$i} {
    width: 10px\* $i;
    height: 30px;
    background-color: red;
  }
}

• 编译结果

.p1 {
  width: 10px;
  height: 30px;
  background-color: red;
}

.p2 {
  width: 20px;
  height: 30px;
  background-color: red;
}

.p3 {
  width: 30px;
  height: 30px;
  background-color: red;
}

.p4 {
  width: 40px;
  height: 30px;
  background-color: red;
}

through 示例

@for $i from 1 through 5 {
  .p#{$i} {
    width: 10px\* $i;
    height: 30px;
    background-color: red;
  }
}

• 编译结果

.p1 {
  width: 10px;
  height: 30px;
  background-color: red;
}

.p2 {
  width: 20px;
  height: 30px;
  background-color: red;
}

.p3 {
  width: 30px;
  height: 30px;
  background-color: red;
}

.p4 {
  width: 40px;
  height: 30px;
  background-color: red;
}

.p5 {
  width: 50px;
  height: 30px;
  background-color: red;
}