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

results matching ""

    No results matching ""