Scss小技巧

[class*=“col-”]
选择所有类名中含有"col-“的元素
与此类似的还有：
[class^=“col-”]
选择所有类名中以"col-“开头的元素
[class$=”-col”]
选择所有类名中以"-col"结尾的元素

**

scss-@for 指令

**

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

（1）.@for $var from through :

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

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译后

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

（2）.@for $var from to :

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

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译后

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