SASS 如何使用占位符（Placeholder）选择器？
随着前端技术的发展，CSS 的写法越来越复杂。为了提高 CSS 的可读性和可维护性，我们经常会使用 SASS 这样的预处理器来写 CSS。在 SASS 中，占位符选择器（Placeholder Selector）是一种非常有用的特性。
占位符选择器与普通 CSS 选择器的最大不同是，在编译成 CSS 后，占位符选择器不会被转化成实际的 CSS 代码，而是被保留在 CSS 中，等待后续被其他选择器继承。
接下来，我们将详细介绍如何在 SASS 中使用占位符选择器。
- 定义占位符选择器
在 SASS 中定义占位符选择器，使用了 % 符号。比如，我们可以这样定义一个占位符选择器：
-- -------------------- ---- ------- ------- - -------- ------------- -------- ----- -------------- ---- ----------------- -------- ------ ----- ---------------- ----- ---------- ----- -
在上面的代码中，我们定义了一个 button 的样式，使用了 %button 来表示这是一个占位符选择器。在 SASS 中，定义了一个占位符选择器后，如果不被继承，这段代码并不会出现在最终的 CSS 中。
- 继承占位符选择器
在 SASS 中，我们可以使用 @extend 指令来继承一个占位符选择器。比如，我们可以这样写：
-- -------------------- ---- ------- ---- - ------- -------- - -------------- - ------- -------- ----------------- -------- - ------------ - ------- -------- ----------------- -------- -
在上面的代码中，我们分别定义了 btn、btn-secondary 和 btn-success 三个类名，并使用了 @extend 指令来继承 %button 占位符选择器的样式。
在编译成 CSS 后，以上代码的输出如下：
-- -------------------- ---- ------- ----- --------------- ------------ - -------- ------------- -------- ----- -------------- ---- ----------------- -------- ------ ----- ---------------- ----- ---------- ----- - -------------- - ----------------- -------- - ------------ - ----------------- -------- -
可以看到，编译后的 CSS 中，并没有 %button 的样式，而只保留了继承了它的类名的样式。这样，在多处使用同一样式的情况下，我们只需要定义一个占位符选择器即可，既提高了效率又减少了代码冗余。同时，由于占位符选择器在 CSS 中并不存在，不会影响到其它选择器的使用。
继承占位符选择器也可以继承嵌套的占位符选择器。比如：
-- -------------------- ---- -------
------------- -
------- -
----------------- -----
-
-
---------- -
------- --------------
-
-------------------- -
------- --------------
----------------- --------
-在上面的代码中，我们将 %hover-button 占位符选择器嵌套在 %button 占位符选择器中，用于控制 button 在 hover 时的样式。.btn:hover 和 .btn-secondary:hover 选择器则分别继承了 %button 和 %hover-button 占位符选择器的样式。在编译后的 CSS 中，这段代码的输出如下：
.btn:hover, .btn-secondary:hover {
background-color: #333;
}
.btn-secondary:hover {
background-color: #f44336;
}可以看到，编译后的 CSS 中，.btn:hover 和 .btn-secondary:hover 选择器的样式都包含了 %button 和 %hover-button 占位符选择器的样式。
总结
占位符选择器是 SASS 中非常有用的特性。通过使用占位符选择器，我们能够降低代码复杂度，提高 CSS 的可读性和可维护性。同时，占位符选择器还能与其他选择器进行嵌套和继承，为我们的样式定义提供更好的组织结构。
示例代码：https://codepen.io/tongzhenggang/pen/mdmMKvJ
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458cf74968c7c53b0b1ef53