@for 指令:

@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;

         }

}

猜你喜欢

转载自blog.csdn.net/qq_29704567/article/details/89228308