在前端开发中，CSS 的重复代码是我们经常会遇到的问题。随着项目的不断扩大，样式表会变得越来越复杂，其中相似的样式代码会越来越多，这不仅会让我们的代码看起来凌乱而且还会抬高加载页面的时间。较新的 Less CSS 预编译器中，提供了一种叫做 Extend 的功能，让开发者可以将相似的 CSS 代码封装成 Mixin，从而让样式表更加干净整洁。
Extend 是什么？
Extend 是一种 Less CSS 的语言特性，它允许你在一个选择器中重复另一个选择器的样式，从而避免了 CSS 代码的重复。
如何使用 Extend？
Extend 是通过 @extend 关键字来实现的，在使用时只需将想要继承的父选择器名称（包括 . 或 #）添加到 @extend 后面即可。下面是一个基础的示例：
/* 定义一个基础样式 */
.box {
border: 1 #888 solid;
background-color: yellow;
padding: 10px;
}
/* 继承基础样式 */
.box2 {
@extend .box;
background-color: red;
}在上面的示例中，我们定义了一个名为 .box 的选择器样式，然后在 .box2 选择器中使用了 @extend .box 将 .box 中的样式继承到 .box2 中。
结果是，.box2 选择器继承了 .box 选择器的所有样式。
Extend 的局限性
尽管 Extend 是非常有用的功能，但是在某些情况下使用它会存在一些局限性：
- 多层嵌套不生效。
在 Less 中，不允许将一个选择器嵌套在其中另一个选择器内并执行 Extend，例如：
/* 定义一个基础样式 */
.page {
.box {
border: 1 #888 solid;
background-color: yellow;
padding: 10px;
}
}
/* 无法在.page2 中继承 .page .box */
.page2 {
@extend .page .box;
background-color: red;
}由于 .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 {
border: 1px solid #cccccc;
font-size: 14px;
color: #333333;
}
/* 在另一个选择器中继承我们的默认样式 */
.box1 {
@extend .common;
padding: 10px;
background-color: #f5f5f5;
}
.box2 {
@extend .common;
padding: 20px;
background-color: #f3f3f3;
}在上述代码中，我们定义了一个名为 .common 的选择器，并设置了一些默认的 CSS 样式，然后将 .box1 和 .box2 选择器作为子选择器，使用 @extend .common 将 .common 的样式继承到两个选择器中。由于两个选择器都继承了 .common，所以它们都具有相同的默认样式，但也可以覆盖所有共同定义的样式属性并按照自己的需求更改样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f591badd4f0e0ff800904