scss-@for 指令

scss-@for 指令

　　此指令用于循环输出，具有两种循环方式，下面分别做一下介绍。

（1）@for $var from <start> through <end>:

　此种方式的遍历索引区间是[start,end]，scss代码实例如下:

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
编译后的css代码如下:

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

（2）@for $var from <start> to <end>:

　　此种方式的遍历索引区间是[start,end-1]，scss代码实例如下:

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
  编译后的css代码实例如下:


.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}