for循环

在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：

• @for $i from through
• @for $i from to
• $i 表示变量 start 表示起始值 end 表示结束值

这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

如下代码，先来个使用 through 关键字的例子：

 @for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

被编译为：

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

再来个 to 关键字的例子：

 @for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译出来的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}