Sass作為一門編程式的語言,也有屬於自己的一套流程控制語法。
在Sass中,我們可以使用“@if語句”來進行條件選擇判斷。Sass的條件選擇語句共有3種:
在Sass中,我們可以使用“@for”來實現循環操作。其中,Sass中的@for循環有2種方式。
語法:
方式1:@for $i from 開始值 through 結束值 方式2:@for $i from 開始值 to 結束值
說明:
這2種方式是相似的,唯一的區別是:方式1包括結束值,方式2不包括結束值。其中“開始值”和“結束值”都是正整數。
在Sass中,我們也可以使用@while語句來實現循環操作。跟JavaScript一樣,@while語句既是循環語句,也是條件判斷語句。
語法:
@while(判斷條件) { 執行語句; }
說明:
在Sass中,沒有類似於JavaScript的“do...while...”這種語句。這一點小伙伴們要注意一下。
除了@for以及@while這2種循環方式之外,Sass還為我們提供了另外一種循環方式:each循環。Sass中的each循環跟jQuery中的each循環很相似,大家對比一下。
語法:
@each $var in 列表值 { …… }
說明:
$var是一個變量,也可以根據後面列表值表示的內容需要寫成$item、$color等。列表值,是Sass中的一種數據類型,可以稱之為“Sass中的數組”。