1. 简介
SASS 是一种 CSS 预处理器，它提供了一些便于开发的语法和功能，在前端开发中广泛使用。其中 @extend 是 SASS 中常用的一个功能之一，它可以让一个选择器继承另一个选择器的规则，类似于 CSS 中的 class 继承。
2. @extend 的语法
使用 @extend 的语法如下：
.selector {
/* some rules */
}
.another-selector {
@extend .selector;
/* additional rules */
}在以上示例中，.another-selector 会继承 .selector 中定义的所有规则，并且在其自身的定义中可以添加额外的规则。可以使用多个选择器通过逗号分隔来同时继承多个选择器的规则。
3. @extend 的作用与优势
3.1 减少重复代码
使用 @extend 可以让样式表变得更加简洁，减少代码冗余。例如，在以下示例中，.btn 和 .btn-primary 实现了相同的规则，如果不使用 @extend，就需要将这些重复的规则写两遍。
-- -------------------- ---- ------- ---- - -------- ----- ------- ----- ---------- ----- - ------------ - ------- ----- ----------------- ----- -
使用 @extend 后，.btn-primary 就会继承 .btn 中定义的所有规则，并在其自身的定义中添加额外的规则，使样式表更加简洁。
3.2 可以不写无用的类名
在传统的 CSS 中，为了实现某些效果（如下面的样式），不得不在 HTML 中使用无用的类名或者 ID。
-- -------------------- ---- ------- ---- - -------- ----- ------- ----- - ---------- ---- - ------------- ----- - ---------- --------------- - ------------- -- -
在这个示例中，为了实现 .btn-group 中的 .btn 之间的间距，需要在 HTML 中添加额外的类名。使用 @extend 可以无需添加无用的类名，只需要在样式表中定义以下规则即可。
-- -------------------- ---- -------
---- -
-------- -----
------- -----
- - - - -- ------ --------- ----
------------ -----
-
-
---------- --------------- -
------------- --
-3.3 提高代码的可维护性
使用 @extend 还可以提高代码的可维护性，因为便于修改和维护代码。例如，在以下示例中，可以轻松地修改 .btn-primary 的颜色值。
-- -------------------- ---- ------- ---- - -------- ----- ------- ----- - ------------ - ------- ----- ----------------- --------------- -
4. 注意事项
使用 @extend 需要注意以下几点：
- 别滥用 @extend，避免产生过多的继承链，影响性能和可维护性。
- SASS 中的选择器顺序很重要，@extend 必须放在选择器的最后位置。
- @extend 不会生成新的选择器，而是让选择器集合合并生成新的样式。
5. 示例代码
-- -------------------- ---- -------
---- -
-------- -----
------- -----
---------- -----
- - - -
------------ -----
-
-
------------ -
------- -----
----------------- -----
-
------------ -
------- -----
----------------- ------
-
----------- -
------- -----
----------------- ----
-
---------- --------------- -
------------- --
-以上代码定义了一个基础的 .btn 样式，以及 .btn-primary、.btn-success、.btn-danger 三个按钮样式，使用 @extend 继承了基础的 .btn 样式。所以它们共享基础的 .btn 样式，并且拥有各自的背景色。
6. 总结
通过本文的介绍，相信大家已经了解了 SASS 中 @extend 的使用方法和优势，希望大家在日常的工作中能够应用到它，提高效率和代码质量。当然，在使用 @extend 时也需要注意其注意事项，以免带来不必要的麻烦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652109ea95b1f8cacd87ca47