SCSS @for 指令

此指令用於迴圈輸出，具有兩種迴圈方式，下面分別做一下介紹。

（1）.@for $var from <start> through <end>:

此種方式的遍歷索引區間是[start,end]，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

（2）.@for $var from <start> to <end>:

此種方式的遍歷索引區間是[start,end-1]，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

編譯後的程式碼例項如下:

[CSS] 純文字檢視 複製程式碼
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

關於#{$i}可以參閱SCSS #{}插值一章節。