LESS 是一种 CSS 预处理器，它提供了许多方便的语法和功能，使得编写 CSS 更加高效和灵活。其中一个非常有用的功能就是 @extend，它可以让我们实现类的继承和复用，避免重复编写样式代码，提高代码的可维护性和可读性。
@extend 的基本用法
在 LESS 中，我们可以使用 @extend 来继承一个已有的类，并将其样式应用到当前的类中。其基本语法如下：
.class1 {
color: red;
}
.class2 {
@extend .class1;
font-size: 16px;
}在上面的代码中，我们先定义了一个 .class1 类，并设置了它的颜色为红色。然后我们定义了一个 .class2 类，并使用 @extend 将 .class1 类的样式应用到 .class2 类中。最后，我们设置了 .class2 类的字体大小为 16px。
这样，我们就可以通过 .class2 来继承和复用 .class1 的样式，同时还可以添加自己的样式。
@extend 的高级用法
除了基本用法外，@extend 还有一些高级用法，可以让我们更加灵活地使用它。
继承多个类
有时候，我们需要从多个类中继承样式。这时，我们可以使用逗号分隔多个类名来实现：
-- -------------------- ---- ------- ------- - ------ ---- - ------- - ---------- ----- - ------- - ------- -------- -------- ------------ ----- -
在上面的代码中，我们定义了三个类，分别设置了它们的颜色、字体大小和字体加粗。然后，我们在 .class3 中使用 @extend 继承了 .class1 和 .class2 的样式，同时还添加了自己的样式。
继承嵌套类
在 LESS 中，我们可以使用嵌套语法来定义类和子类。如果我们想要继承一个嵌套类，可以使用 & 符号来引用当前类的选择器：
-- -------------------- ---- -------
------- -
------ ----
---------- -
---------- -----
-
-
------- -
------- ------- -----------
------------ -----
-在上面的代码中，我们定义了一个 .class1 类和一个 .sub-class 子类，并设置了它们的颜色和字体大小。然后，我们定义了一个 .class2 类，并使用 @extend 继承了 .class1 中的 .sub-class 子类，并添加了自己的样式。
继承带有参数的类
有时候，我们需要定义一个带有参数的类，例如：
.border-radius(@radius) {
border-radius: @radius;
}这个类可以接收一个参数 @radius，用来设置边框圆角半径。如果我们想要继承这个带有参数的类，可以使用括号来传递参数：
.class1 {
.border-radius(5px);
}
.class2 {
@extend .class1;
background-color: red;
}在上面的代码中，我们定义了一个带有参数的 .border-radius 类，并在 .class1 中使用它来设置边框圆角半径。然后，我们在 .class2 中使用 @extend 继承了 .class1 的样式，并添加了自己的样式。
总结
@extend 是 LESS 中非常有用的功能之一，它可以让我们实现类的继承和复用，避免重复编写样式代码，提高代码的可维护性和可读性。除了基本用法外，@extend 还有一些高级用法，可以让我们更加灵活地使用它。在实际开发中，我们可以根据需要选择合适的用法，提高代码的效率和质量。
示例代码
-- -------------------- ---- -------
-- ---- --
------- -
------ ----
-
------- -
------- --------
---------- -----
-
-- ---- - ----- --
------- -
------ ----
-
------- -
---------- -----
-
------- -
------- -------- --------
------------ -----
-
-- ---- - ----- --
------- -
------ ----
---------- -
---------- -----
-
-
------- -
------- ------- -----------
------------ -----
-
-- ---- - -------- --
----------------------- -
-------------- --------
-
------- -
--------------------
-
------- -
------- --------
----------------- ----
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6604f999d10417a2222746f1