@for
<code>@for</code>指令常用于循环输出。
<code>@for</code> 有两种使用方式:<code>from start through end</code>和<code>from start to end</code>,
两者的区别在于,前者遍历的范围是 [start, end], 而后者的遍历范围是 [start, end-1]。在<code>@for</code>循环中使用一个固定变量来替代遍历到的元素。如果你想实现从大到小的遍历,只需让 start 大于 end 即可。或者可以这样来理解
@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。
从 <start> 开始循环,到 <end> 结束
给个例子理解下!:
through:
@for $i from 1 through 3{
.item-#{$i} {width: 2em * $i;}
}
编译结果如下:
.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;}
}
编译结果如下:
.items-1 {
width: 2em; }
.items-2 {
width: 4em; }
循环从 <code>start</code>开始,一直遍历循环到<code>end</code> 结束。这种形式的循环只要碰到 <code>end</code> 就会停止循环(将不会遍历<code>end</code> 值)。