此指令用于循環輸出，具有兩種循環方式，下面分別做一下介紹。

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

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

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

　　編譯后的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; }

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的scss-@for 指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。