在制作網(wǎng)格系統(tǒng)的時(shí)候，大家應(yīng)該對(duì) .col1~.col12 這樣的印象較深。在 CSS 中你需要一個(gè)一個(gè)去書(shū)寫(xiě)，但在 Sass 中，可以使用 @for 循環(huán)來(lái)完成。在 Sass 的 @for 循環(huán)中有兩種方式：

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

• $i 表示變量
• start 表示起始值
• end 表示結(jié)束值

這兩個(gè)的區(qū)別是關(guān)鍵字 through 表示包括 end 這個(gè)數(shù)，而 to 則不包括 end 這個(gè)數(shù)。

如下代碼，先來(lái)個(gè)使用 through 關(guān)鍵字的例子：

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

編譯出來(lái)的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

再來(lái)個(gè) to 關(guān)鍵字的例子：

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

編譯出來(lái)的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}