接觸過Boostrap的小伙伴,估計都見過.col1~.col12這樣的樣式。在CSS中,對於這種樣式我們一般都需要一個一個地書寫。但是在Sass中,我們可以使用@for循環來實現。
在Sass中,我們可以使用“@for”來實現循環操作。其中,Sass中的@for循環有2種方式。
語法:
方式1:@for $i from 開始值 through 結束值 方式2:@for $i from 開始值 to 結束值
說明:
這2種方式是相似的,唯一的區別是:方式1包括結束值,方式2不包括結束值。其中“開始值”和“結束值”都是正整數。
舉例1:
@for $i from 1 through 3 { .item-#{$i} { width:(20px * $i); } }
編譯出來的CSS代碼如下:
.item-1 { width:20px; } .item-2 { width:40px; } .item-3 { width:60px; }
分析:
如果將“@for $i from 1 through 3”改為“@for $i from 1 to 3”,則編譯出來的CSS代碼如下:
.item-1 { width:20px; } .item-2 { width:40px; }
舉例2:
@for $i from 1 through 3 { .border-#{$i} { border:#{$i}px solid red; } }
編譯出來的CSS代碼如下:
.border-1 { border: 1px solid red; } .border-2 { border: 2px solid red; } .border-3 { border: 3px solid red; }
分析:
如果小伙伴們忘了“插值#{}”的用法,記得回去翻翻“Sass插值”這一節。