Sass is awesome 给CSS加点料

1、循环

@for 指令

@for $var from through 此种方式的遍历索引区间是[start,end]

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

// 输出

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

@for $var from to :此种方式的遍历索引区间是[start,end-1]

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

// 输出

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

@each $var in <list>

@each $color, $border in (aqua, dotted), (red, solid), (green, double) {
  .#{$color} {
    background-color : $color;
    border: $border;
  }
}

@each $var in <map>

$tagColor:(
  "red": #ff4d4f,
  "geekblue": #597ef7,
  "orange": #ffa940,
  "cyan": #36cfc9,
  "green": #73d13d,
  "blue": #409eff,
  "purple": #9254de,
  "magenta": #f759ab
);
@each $tag, $color in $tagColor{
  .tl-tag--#{$tag}{
    color: $color;
    background-color: rgba($color: $color, $alpha: .15);
  }
}

2、混入

文字超出用 … 表示

@mixin ellipsis($clamp: 1){
    overflow: hidden;
    text-overflow: ellipsis;
    @if($clamp == 1){
        white-space: nowrap;
    }@else{
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $clamp;
        -webkit-box-orient: vertical;
    }
}