Sass 是一种 CSS 的预处理器，它提供了很多 CSS 无法实现的特性，其中最实用的特性之一就是占位符 % 和 @extend。
占位符 %
占位符 % 是 Sass 中的一种特殊选择器，它通过 @extend 关键字来将样式从一个选择器传递到另一个选择器。使用占位符 % 可以减少 CSS 的代码量并加速页面渲染。
使用方法
定义一个占位符 %：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ---- ----- ---------- ----- ------------ ---- -------------- ---- ----------- ------- ------ ----- ----------------- -------- ------- --- ----- -------- - -- -- ------ - ------------ ----- ------------- ----- -
使用占位符 %：
.btn {
@extend %btn;
}
// 或者
.x-box {
@extend %x-box;
}注意事项
- 占位符 % 可以被多次 @extend。
- 只有在 CSS 中使用了 @extend 的占位符 % 才会生成相应的 CSS 代码。
- 占位符 % 可以继承另一个占位符 %。
- 占位符 % 没有输出值，因此无法像变量一样传递值。
- 不要使用占位符 % 来定义组合选择器（如 .btn.active），此时应该使用类选择器。
@extend
使用 @extend 可以将一个选择器的全部样式（包括占位符 %）传递给另一个选择器。
使用方法
定义一个样式：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ---- ----- ---------- ----- ------------ ---- -------------- ---- ----------- ------- ------ ----- ----------------- -------- ------- --- ----- -------- -
使用 @extend：
-- -------------------- ---- ------- ------------ - ------- ----- - ------------ - ------- ----- ----------------- -------- ------------- -------- -
注意事项
- 使用 @extend 的元素必须是同一级别、同一类型或是其自身的子元素。
- 使用 @extend 时注意避免出现循环引用。
- 不要使用 @extend 来定义组合选择器（如 .btn.active），此时应该使用类选择器。
示例代码
使用占位符 %：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ---- ----- ---------- ----- ------------ ---- -------------- ---- ----------- ------- ------ ----- ----------------- -------- ------- --- ----- -------- - ---- - ------- ----- - ------ - -------- ------ -------- --- ----- ---------- ----- ------------ ----------- ------ ----- ----------------- ----- ------- --- ----- ----- -------------- ---- - ------------- - ------- ------- -
使用 @extend：
-- -------------------- ---- -------
---- -
-------- -------------
-------- ---- -----
---------- -----
------------ ----
-------------- ----
----------- -------
------ -----
----------------- --------
------- --- ----- --------
-
------------ -
------- -----
-
------------ -
------- -----
----------------- --------
------------- --------
-
---- -
----------- -----
------------- --
-------------- --
-
--------------- -
-------- -------------
-------------- ----
------- --- ----- -----
- - -- -
-------- -------------
-------- ---- -----
------- -
----------------- --------
-
-
----------- -
------- --------
------ -----
----------------- --------
------------- --------
-
-总结
占位符 % 和 @extend 是 Sass 中非常实用的特性，可以有效地减少代码量和加速页面渲染。但是，在使用占位符 % 和 @extend 时需要注意一些细节问题，避免出现不必要的错误。通过掌握占位符 % 和 @extend 的使用方法及注意事项，可以更加高效地使用 Sass 来进行样式开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b3b4c968c7c53b0aa1022