SASS 中的 @extend 用法及注意点
在前端开发中，CSS 是不可或缺的一部分，但 CSS 语法比较冗长，写起来很不方便。为了解决这个问题，我们可以使用 SASS（Syntactically Awesome StyleSheets）这个 CSS 预处理器来大幅简化 CSS 的编写。
SASS 中的 @extend 是一个很强大的功能，可以实现类似继承一样的效果，避免重复劳动，提高 CSS 的可维护性。本文将详细介绍 @extend 的用法及注意点，希望能够对大家有所帮助。
@extend 的基本用法
在 SASS 中，可以使用 @extend 来实现类似继承的效果。假设我们有一个基础样式 .base-style，我们可以使用 @extend 来继承它的样式：
.base-style {
color: #333;
}
.new-style {
@extend .base-style;
font-size: 16px;
}这样，.new-style 就会继承 .base-style 中的所有样式，并加上自己的一些样式。最终编译出来的 CSS 代码如下：
.base-style, .new-style {
color: #333;
}
.new-style {
font-size: 16px;
}可以看到，SASS 将 .new-style 继承自 .base-style 的样式，合并了起来，生成了新的 CSS 代码。
同时，我们还可以继承多个样式，只需要在 @extend 后面跟上多个类名即可：
-- -------------------- ---- ------- ----------- - ------ ----- - ------------ - ----------------- ----- - ---------- - ------- ------------ ------------- ---------- ----- -
这样，.new-style 就继承了 .base-style 和 .extra-style 的样式。最终编译出来的 CSS 代码如下：
-- -------------------- ---- ------- ------------ ---------- - ------ ----- - ------------- ---------- - ----------------- ----- - ---------- - ---------- ----- -
注意：在继承多个样式时，SASS 会按照类名在 CSS 中的先后顺序来合并样式，所以要根据实际需要进行设计和排列。
@extend 的注意点
虽然 @extend 很方便，但是在使用过程中也有一些需要注意的地方：
- 不能继承父级样式
在 SASS 中，@extend 只能继承同一层级的样式，不能继承父级的样式。下面的案例中，new-style 想要继承 base-style，但是实际上并不会生效：
.wrapper .base-style {
color: #333;
}
.wrapper .new-style {
@extend .base-style; // 这里并不会生效
font-size: 16px;
}这样写是不行的，要继承 base-style，必须在同一层级中。
- 不要滥用 @extend
虽然 @extend 非常方便，但是如果使用得过于频繁，就会导致较长的 CSS 选择符。例如下面的代码中，new-style 继承了 base-style 和 extra-style，但是生成的 CSS 选择符就比较长了：
-- -------------------- ---- ------- ----------- - ------ ----- - ------------ - ----------------- ----- - -------- ---------- - ------- ------------ ------------- ---------- ----- -
最终生成的 CSS 选择符如下：
.base-style, .wrapper .new-style, .extra-style, .wrapper .new-style {
background-color: #fff;
color: #333;
}
.wrapper .new-style {
font-size: 16px;
}可以看到，CSS 的选择符非常长，如果出现在多个地方，就会造成不必要的网络带宽浪费。
- 不要跨文件使用 @extend
虽然 SASS 支持在不同文件中使用 @extend，但是这样会使你的 CSS 设计变得混乱。比如，我们有一个 main.scss 主文件和一个 variables.scss 变量文件，并且在变量文件中定义了一个 $brand-color 变量，现在我们想要在主文件中使用 @extend 继承这个变量：
-- -------------------- ---- ------- -- -------------- ------------- -------- -- --------- ----------- - ------ ------------- - ---------- - ------- ------------ ---------- ----- -
这样看起来没什么问题，但是如果我们在其他地方也用到了这个变量，并且改变了它的值，就会在不知不觉中改变我们在 main.scss 中的样式，这种情况非常危险，所以不要在不同文件中使用 @extend。
总结
@extend 是 SASS 中一个非常有用的功能，可以让我们编写 CSS 更加方便。在使用 @extend 时，需要注意不能继承父级样式、不要滥用、不要跨文件使用等事项，这样可以避免出现意外的问题，提高代码的可维护性和可读性。
示例代码：
-- -------------------- ---- ------- ----------- - ------ ----- - ---------- - ------- ------------ ---------- ----- - ------------ - ----------------- ----- - ----------- - ------- ------------ ------------- ---------- ----- - -------- ----------- - ------ ----- - -------- ---------- - ------- ------------ ---------- ----- - ------------- -------- ------------ - ------ ------------- - ----------- - ------- ------------- ---------- ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66559463d3423812e4a42942