Sass 是一种基于 CSS 的预处理器，它的功能比 CSS 更加强大和灵活。@extend 指令是 Sass 中的一个非常有用的特性，它可以使样式的复用和维护更加简单和方便。本文将详细介绍 @extend 指令的使用方法和注意事项。
@extend 指令简介
@extend 指令是 Sass 中用于继承样式的指令，它可以将一个选择器的样式继承到另一个选择器中。这样做可以减少样式的重复代码，提高代码的可维护性。
@extend 指令的语法格式如下：
.selector {
// 样式
}
.new-selector {
@extend .selector;
// 新的样式
}其中，.selector 是要继承的选择器，.new-selector 是新的选择器，可以继承 .selector 的样式。
@extend 指令的使用方法
继承单个选择器
@extend 指令可以继承一个单独的选择器的样式。例如，我们有一个按钮的样式：
-- -------------------- ---- ------- ---- - ----------------- -------- ------- ----- ------ ------ -------- ---- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- ------- --- ---- ------- -------- -
现在我们想要创建一个绿色的按钮，可以使用 @extend 指令继承 .btn 的样式，并添加一个新的背景颜色：
.green-btn {
@extend .btn;
background-color: #4CAF50;
}这样我们就创建了一个新的选择器 .green-btn，并继承了 .btn 的样式，然后只需要添加一个新的背景颜色即可。
继承多个选择器
@extend 指令也可以继承多个选择器的样式。例如，我们有一个表格的样式：
-- -------------------- ---- -------
------ -
---------------- ---------
------ -----
--- -- -
----------- -----
-------- ----
------- --- ----- -----
-
-- -
----------------- --------
------ ------
-
-现在我们想要创建一个带有橙色标题的表格，可以使用 @extend 指令继承 .table 和 th 的样式，并添加一个新的背景颜色：
.orange-table {
@extend .table;
@extend th;
background-color: #FFA500;
}这样我们就创建了一个新的选择器 .orange-table，并继承了 .table 和 th 的样式，然后只需要添加一个新的背景颜色即可。
继承父选择器
@extend 指令也可以继承父选择器的样式。例如，我们有一个导航栏的样式：
-- -------------------- ---- -------
---- -
-- -
---------------- -----
------- --
-------- --
--------- -------
-- -
------ -----
-
-
- -
-------- ------
------ ------
----------- -------
-------- ---- -----
---------------- -----
-
------- -
----------------- --------
-
-现在我们想要创建一个垂直的导航栏，可以使用 @extend 指令继承 .nav 和 ul 的样式，并添加一个新的样式来改变它的方向：
.vertical-nav {
@extend .nav;
@extend ul;
flex-direction: column;
}这样我们就创建了一个新的选择器 .vertical-nav，并继承了 .nav 和 ul 的样式，然后只需要添加一个新的样式来改变它的方向即可。
@extend 指令的注意事项
虽然 @extend 指令非常有用，但是在使用时也有一些需要注意的事项。
不要滥用 @extend 指令
@extend 指令可以使样式的复用和维护更加简单和方便，但是滥用它会导致代码的冗余和不必要的样式继承。因此，在使用 @extend 指令时要慎重考虑，避免滥用。
不要与继承关系混淆
@extend 指令并不是真正的继承，它只是将一个选择器的样式复制到另一个选择器中。因此，在使用 @extend 指令时要注意与继承关系的区别。
不要在嵌套中使用 @extend 指令
@extend 指令只能在选择器的顶层使用，不能在嵌套中使用。这是因为在嵌套中使用 @extend 指令会导致样式的冗余和不必要的样式继承。
示例代码
下面是一个完整的示例代码，演示了如何使用 @extend 指令创建一个带有橙色标题的表格：
-- -------------------- ---- -------
------ -
---------------- ---------
------ -----
--- -- -
----------- -----
-------- ----
------- --- ----- -----
-
-- -
----------------- --------
------ ------
-
-
------------- -
------- -------
------- ---
----------------- --------
-总结
@extend 指令是 Sass 中非常有用的一个特性，它可以使样式的复用和维护更加简单和方便。在使用 @extend 指令时要注意不要滥用，要注意与继承关系的区别，不要在嵌套中使用 @extend 指令。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662f5f0dd3423812e4d549fc