sass中的占位符%，@extend，@mixin（@include）的编译区别和使用场景-优快云博客

博客介绍了同一段CSS不同编译方式的效率差异。使用@extend时，基础类会出现在编译后的文件中；占位符选择器自身不出现在编译文件中，适合制作样式库；@mixin在浏览器效果相同，但编译后有冗余。并给出不同场景下的编译方式建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于下面同一段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... */
}