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

 

转载于:https://www.cnblogs.com/ibabyli/p/9871289.html