@for
<code>@for</code>指令常用于循環(huán)輸出绍申。
<code>@for</code> 有兩種使用方式:<code>from start through end</code>和<code>from start to end</code>,
兩者的區(qū)別在于刃泌,前者遍歷的范圍是 [start, end], 而后者的遍歷范圍是 [start, end-1]厕妖。在<code>@for</code>循環(huán)中使用一個固定變量來替代遍歷到的元素。如果你想實現(xiàn)從大到小的遍歷蝶锋,只需讓 start 大于 end 即可陆爽。或者可以這樣來理解
@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示變量
start 表示起始值
end 表示結(jié)束值
這兩個的區(qū)別是關(guān)鍵字through表示包括end這個數(shù)扳缕,而to則不包括end這個數(shù)慌闭。
從 <start> 開始循環(huán),到 <end> 結(jié)束
給個例子理解下!:
through:
@for $i from 1 through 3{
.item-#{$i} {width: 2em * $i;}
}
編譯結(jié)果如下:
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
從 <code>start</code>開始(此處示例是1)躯舔,一直遍歷到 <code>end</code> (此處示例是3) 包括<code>end</code>的值驴剔。
to:
@for $i from 1 to 3{
.item-#{$i}{width: 2em * $i;}
}
編譯結(jié)果如下:
.items-1 {
width: 2em; }
.items-2 {
width: 4em; }
循環(huán)從 <code>start</code>開始,一直遍歷循環(huán)到<code>end</code> 結(jié)束庸毫。這種形式的循環(huán)只要碰到 <code>end</code> 就會停止循環(huán)(將不會遍歷<code>end</code> 值)。