sass中的占位符%，@extend，@mixin（@include）的编译区别和使用场景

对于下面同一段css，它们的编译效率是不同的。

1、使用@extend：基础类icon会出现在编译后的css文件中，即使它可能只是拿来被继承，而不是作为icon这个class单独使用

//基础类icon
.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /* error specific styles... */
}

.info-icon {
  @extend .icon;
  /* info specific styles... */
}

编译为：

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

 

2、使用占位符选择器（以%作为开头的选择器）： 它自身不会出现在编译后的CSS文件中, 只会出现在@extend了它的那些选择器中，一般用在制作 Sass 样式库的时候。

上例中, 用%icon替换.icon,CSS中不会出现.icon类:

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

3、使用@mixin： %选择器和无参数mixin差不多, 在浏览器中产生的效果是一样的, 但是编译后的CSS有很大不同，同样没有icon这个类，但是minx中继承自icon的部分编译了两次，有冗余

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @include icon;
  /* error specific styles... */
}

.info-icon {
  @include icon;
  /* info specific styles... */
}

编译为：

.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* error specific styles... */
}

.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* info specific styles... */
}

 

综上所述：

对于基础类会单独作为class使用时，使用@extend。

在制作样式库时，使用占位符编译上效率更好。

对于大量重复使用的基础样式，可以使用@mixin。