scss @for 循環

在實現樣式過程中碰到了一個隔一定時間右滑出來的效果,一開始一個個寫,感覺太麻煩了,搜了一下scss有個@for方法,效果很強大

 

使用scss @for循環

 

注意一下在選擇器調用循環項 $i 和樣式裏調用是有區別的,選擇器裏是用插值 #{} ,可以網上找點資料細看一下,然後看網上說還有 from 1 to 16 是不包含結束值16的循環, from 1 through 16包含結束值16

編譯結果如下

和想要的結果一樣

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章