@for循環（上）

在製作網格系統的時候，大家應該對.col1~.col12 這樣的印象較深。在CSS 中你需要一個一個去書寫，但在Sass 中，可以使用@for 循環來完成。在Sass 的@for 循環中有兩種方式：

@for $i from <start> through <end>
@for $i from <start> to <end>

• $i 表示變量
• start 表示起始值
• end 表示結束值

這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

如下代碼，先來個使用through關鍵字的例子：

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

編譯出來的CSS:

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