需求

scss的@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> 必须是整数值。

例子

// font-size：14-50
@for $var from 14 through 50 {
  .font-size-#{$var} { font-size: 1px * $var; }
}

编译为：

.font-size-14 { font-size: 14px; }
// ...15~49
.font-size-50 { font-size: 50px }