在前端开发中，CSS 的重复代码是我们经常会遇到的问题。随着项目的不断扩大，样式表会变得越来越复杂，其中相似的样式代码会越来越多，这不仅会让我们的代码看起来凌乱而且还会抬高加载页面的时间。较新的 Less CSS 预编译器中，提供了一种叫做 Extend 的功能，让开发者可以将相似的 CSS 代码封装成 Mixin，从而让样式表更加干净整洁。
Extend 是什么？
Extend 是一种 Less CSS 的语言特性，它允许你在一个选择器中重复另一个选择器的样式，从而避免了 CSS 代码的重复。
如何使用 Extend？
Extend 是通过 @extend 关键字来实现的，在使用时只需将想要继承的父选择器名称（包括 . 或 #）添加到 @extend 后面即可。下面是一个基础的示例：
-- -------------------- ---- ------- -- -------- -- ---- - ------- - ---- ------ ----------------- ------- -------- ----- - -- ------ -- ----- - ------- ----- ----------------- ---- -
在上面的示例中，我们定义了一个名为 .box 的选择器样式，然后在 .box2 选择器中使用了 @extend .box 将 .box 中的样式继承到 .box2 中。
结果是，.box2 选择器继承了 .box 选择器的所有样式。
Extend 的局限性
尽管 Extend 是非常有用的功能，但是在某些情况下使用它会存在一些局限性：
- 多层嵌套不生效。
在 Less 中，不允许将一个选择器嵌套在其中另一个选择器内并执行 Extend，例如：
-- -------------------- ---- -------
-- -------- --
----- -
---- -
------- - ---- ------
----------------- -------
-------- -----
-
-
-- --------- --- ----- ---- --
------ -
------- ----- -----
----------------- ----
-由于 .box 选择器嵌套在 .page 选择器中，那么我们无法在 .page2 选择器中使用 @extend .page .box 继承 .page .box 样式。
- 类和 ID 选择器不能互相 Extend。
/* .class1 不能继承 #id1 的样式 */
#id1 {
color: blue;
}
.class1 {
@extend #id1;
}在上面的代码中，.class1 选择器无法继承 #id1 选择器的属性。同样的，如果我们尝试在 #id1 选择器中使用 @extend .class1 来继承 .class1 选择器中的属性也将不起作用。
- 无法继承不同文件中的选择器。
在 Less 中，只能在同一个 Less 文件中使用 Extend。因此，如果想在一个 Less 文件中继承另一个 Less 文件中的选择器，可以使用 @import 导入文件。
总结
总之，使用 Extend 来封装尽可能多的 CSS 代码，可以节省时间和努力，并使您的代码更加整洁和易于阅读。但需要注意的是，Extend 并不是解决每个 CSS 问题的钥匙，需要慎重使用。
最后，附上一个在实际开发中，我们对一些 class 统一配备一个带有默认样式的父级 .common 选择器进行 @extend 的示例：
-- -------------------- ---- ------- -- ---------- -- ------- - ------- --- ----- -------- ---------- ----- ------ -------- - -- ----------------- -- ----- - ------- -------- -------- ----- ----------------- -------- - ----- - ------- -------- -------- ----- ----------------- -------- -
在上述代码中，我们定义了一个名为 .common 的选择器，并设置了一些默认的 CSS 样式，然后将 .box1 和 .box2 选择器作为子选择器，使用 @extend .common 将 .common 的样式继承到两个选择器中。由于两个选择器都继承了 .common，所以它们都具有相同的默认样式，但也可以覆盖所有共同定义的样式属性并按照自己的需求更改样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659f591badd4f0e0ff800904