在制作網格系統的時候，大家應該對 .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;
}