在 Sass 中使用 @for 循环

可以在 Sass 中使用 @for 循环添加样式，它的用法和 JavaScript 中的 for 循环类似。

@for 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始 to 结束”不包括结束数字，而“开始 through 结束”包括结束数字。

这是一个开始 through 结束的示例：

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

#{$i} 部分是将变量（i）与文本组合成字符串的语法。 当 Sass 文件转换为 CSS 时，它看起来像这样：

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}

这是创建网格布局的有效方法。 现在，有了 12 个可用作 CSS class 的列宽选项

<style type='text/scss'>
  @for $j from 1 through 5 {
    .text-#{$j} { font-size: 15px * $j; }
  }
</style>