Sass占位符选择器%符号究竟是什么？

sass 中的占位符选择器：深入理解 % 符号的含义

在 sass 样式表中，我们经常会遇到一些特殊的符号，它们赋予了 sass 强大的功能。本文将重点解释 sass 代码中 % 符号的含义及其使用方法，并结合示例进行说明。

你可能在编写 sass 代码时遇到过类似这样的代码片段：

%style {
  width: 100px;
  height: 30px;
  line-height: 28px;
  vertical-align: middle;
}

这段代码中，%style 并非一个普通的 css 选择器，它是一个占位符选择器。 % 符号表示定义了一个占位符，它本身不会直接编译成 css 代码。占位符选择器主要用于代码复用，通过 @extend 指令将占位符选择器中的样式扩展到其他选择器中。

简单来说，占位符选择器定义了一组样式规则，你可以将其理解为一个样式模板。 只有当它被 @extend 指令引用时，这些样式才会应用到实际的 css 选择器上。如果单独使用 %style，编译后的 css 文件中将不会包含任何与 %style 相关的样式。 占位符选择器提供了比混合器（mixin）更简洁的方式来复用样式，尤其是在需要继承样式而非简单地插入样式的时候。 更多关于 @extend 指令以及占位符选择器与混合器的区别，可以参考 sass 的官方文档。