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

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

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

@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>:

　　此種方式的遍歷索引區(qū)間是[start,end-1]，scss代碼實(shí)例如下:

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

　　編譯后的css代碼實(shí)例如下:

.item-1 {width: 2em; } .item-2 {width: 4em; }

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。