在 Sass 中，@extend 指令是一个非常有用的工具，它可以让我们在样式表中复用已有的 CSS 样式。但是，@extend 指令也有一些缺点，需要我们在使用时注意。
优点
1. 可以减少 CSS 代码量
使用 @extend 指令可以将多个样式合并成一个，从而减少 CSS 代码量。例如，我们有以下两个样式：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ----- ------- --- ----- ----- - ------------ - ----------------- ----- ------ ----- -
如果我们想要创建一个带有蓝色背景的按钮，并且保留 .btn 样式的其他属性，可以这样写：
.btn-blue {
@extend .btn;
@extend .btn-primary;
}这样，.btn-blue 样式就包含了 .btn 和 .btn-primary 的所有属性，我们就可以不用重复书写这些属性了。
2. 可以让样式更加清晰明了
使用 @extend 指令可以让样式更加清晰明了。例如，我们可以将一些常用的样式定义成一个基础类，然后在其他样式中使用 @extend 指令来继承这些基础样式。这样，我们就可以将样式分成多个模块，使得样式表更加清晰明了。
缺点
1. 可能会产生冗余代码
使用 @extend 指令可能会产生冗余代码。例如，我们有以下两个样式：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ----- ------- --- ----- ----- - --------- - ------- ----- ----------------- ----- ------ ----- -
如果我们在样式表的其他地方再次使用了 .btn 样式，那么在编译时，.btn 样式就会被复制到所有使用了 @extend 指令的样式中。这样就会导致代码冗余，降低了样式表的可维护性。
2. 可能会导致样式层级过深
使用 @extend 指令可能会导致样式层级过深。例如，我们有以下两个样式：
-- -------------------- ---- -------
---- -
-------- -------------
-------- -----
------- --- ----- -----
-
--------- -
------- -----
----------------- -----
------ -----
------- -
----------------- --------
-
-在这个例子中，.btn-blue 样式继承了 .btn 样式，并且在其下面定义了一个伪类选择器 :hover。这样，.btn-blue:hover 样式就会变成 .btn:hover 和 .btn-blue:hover 的并集，导致样式层级过深。这会使得样式表变得难以维护，而且可能会影响性能。
如何使用 @extend 指令
为了避免 @extend 指令带来的缺点，我们应该遵循以下几个原则：
1. 不要滥用 @extend 指令
@extend 指令虽然可以让代码更加简洁，但是滥用 @extend 指令可能会导致样式表变得难以维护。因此，在使用 @extend 指令时，我们应该慎重考虑，只在必要的情况下使用。
2. 尽量避免使用嵌套 @extend 指令
嵌套 @extend 指令可能会导致样式层级过深，从而影响样式表的可维护性和性能。因此，我们应该尽量避免使用嵌套 @extend 指令，而是将样式分成多个模块，使用 @extend 指令来继承基础样式。
3. 使用占位符选择器
占位符选择器是一种特殊的选择器，它以 % 开头，并且不会被编译成 CSS。使用占位符选择器可以避免 @extend 指令带来的代码冗余问题。例如，我们可以这样写：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ----- ------- --- ----- ----- - ---- - ------- ----- - --------- - ------- ----- ----------------- ----- ------ ----- -
这样，编译后的 CSS 中就只会包含一个 .btn 样式，而不会出现冗余代码。
结论
@extend 指令是 Sass 中非常有用的一个工具，它可以让我们在样式表中复用已有的 CSS 样式。但是，在使用 @extend 指令时，我们需要注意其带来的缺点，避免滥用 @extend 指令，尽量避免使用嵌套 @extend 指令，使用占位符选择器来避免代码冗余问题。这样，我们就可以更加高效地编写可维护的样式表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6739bab1317fbffedf186448