SASS 是一种流行的 CSS 预处理器，它提供了许多方便的功能来简化和优化 CSS 的编写。其中一个重要的功能是 @extend 指令，它可以让我们轻松地复用已有的 CSS 样式，并且可以避免重复的代码。
@extend 指令的基本用法
@extend 指令的基本语法如下：
--------- - -- ---- - --------------- - ------- ---------- -- ---- -
这个例子中，我们定义了一个基本样式 .selector，然后使用 @extend 指令将其扩展到 .other-selector 中。这样，.other-selector 就继承了 .selector 的所有样式，同时可以添加自己的扩展样式。
@extend 指令的高级用法
除了基本用法之外，@extend 指令还有一些高级用法，可以让我们更加灵活地使用它。
父选择器占位符
@extend 指令可以使用父选择器占位符 %selector 来定义一些通用的样式，然后在需要的地方使用 @extend 指令来扩展它们。这样，我们就可以避免重复的代码，同时保证样式的一致性。
------- - -------- ------------- -------- ---- ----- ---------- ----- ------------ ----- ----------- ------- ---------------- ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- - --------------- - ------- -------- - ----------------- - ------- -------- ----------------- -------- -
这个例子中，我们定义了一个父选择器占位符 %button，它包含了一些通用的按钮样式。然后，在需要的地方使用 @extend 指令来扩展它们，例如 .button-primary 和 .button-secondary。这样，我们就可以轻松地创建不同类型的按钮，同时保持样式的一致性。
多重继承
@extend 指令还支持多重继承，也就是说一个选择器可以同时继承多个选择器的样式。这样，我们就可以更加灵活地组合样式，避免重复的代码。
------- - -------- ------------- -------- ---- ----- ---------- ----- ------------ ----- ----------- ------- ---------------- ----- ------ ----- ----------------- -------- ------- ----- -------------- ---- ------- -------- - --------------- - ------- -------- - --------------- - ------- -------- ----------------- ------------ ------ -------- ------- --- ----- -------- - ----------------------- - ------- ---------------- ------- ---------------- -
这个例子中，我们定义了一个基本样式 .button，然后使用 @extend 指令将它扩展到 .button-primary 和 .button-outline 中。然后，我们又使用 @extend 指令将它们扩展到 .button-primary-outline 中。这样，.button-primary-outline 就同时继承了 .button-primary 和 .button-outline 的样式，从而创建了一种新的按钮样式。
@extend 指令的注意事项
@extend 指令虽然很方便，但是也有一些需要注意的地方。
不要滥用 @extend 指令
@extend 指令虽然可以让我们避免重复的代码，但是滥用它可能会导致样式的混乱和不可维护性。因此，在使用 @extend 指令时，需要慎重考虑每个选择器的继承关系，避免出现过于复杂的继承链。
注意选择器的优先级
@extend 指令会将选择器的样式合并到当前选择器中，因此需要注意选择器的优先级。如果不小心使用了高优先级的选择器，可能会导致样式被覆盖或者失效。因此，在使用 @extend 指令时，需要仔细考虑每个选择器的优先级，避免出现样式冲突。
总结
@extend 指令是 SASS 中一个非常有用的功能，它可以让我们轻松地复用已有的 CSS 样式，并且可以避免重复的代码。除了基本用法之外，@extend 指令还支持父选择器占位符和多重继承等高级用法，可以让我们更加灵活地使用它。但是，在使用 @extend 指令时，需要注意不要滥用它，同时也需要注意选择器的优先级，避免出现样式冲突。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fe9a59d10417a2229d86a7