@for 表示,重复输出一组样式,对于每次重复,计数器变量用于调整每次输出的结果,该指令有两种形式:
1.@for $var from <start> to <end>
2.@for @var from <start> through <end>
注意关键字through和to的区别:
@for 将制定@var为指定的范围内每个连续的数值,并且每一次输出的嵌套的样式中使用$var的值,对于以下两种形式:
from....through的形式,范围包括<start>和<end>,
from....to的形式,从<start>开始运行,但不包括<end>
$var 可以是任何变量名,当<start>比<end>大的时候,计数器将递减,而不是增量
例子:
$for $i from 1 through 3 {
.item-#{$i} {
扫描二维码关注公众号,回复:
5858920 查看本文章
width:2em*$i;
}
}
用koala编译为:
.item-1{
width:2em;
}
.item-2{
width:4em;
}
.item-3{
width:6em;
}
其中,#{}包括要输出的内容。
例子:
@for $i from 1 through 12 {
.gift>div:nth:child(#{$i}) {
animation:rotate 1s $i*0.1s infinite;
}
}