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

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

一、使用@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... */
}

 

二、使用占位符选择器（以%做为开头的选择器）： 它自身不会出如今编译后的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... */
}

三、使用@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。