LESS 是一种 CSS 预处理器，它为我们提供了许多非常有用的功能，其中之一就是样式的继承。通过样式的继承，我们可以将共用的样式定义在一个基类中，然后在其他样式中继承这个基类，从而减少代码量，同时也更容易维护。
基础语法
使用 LESS 实现样式的继承非常简单，只需要使用 extend 关键字即可。假如我们需要定义一个样式基类，可以这样写：
.base-class {
color: red;
font-size: 14px;
}接下来定义一个继承自基类的样式：
.new-class {
&:extend(.base-class);
font-weight: bold;
}在上述代码中，我们使用 & 符号来代表 new-class，:&extend(.base-class) 表示将 .new-class 继承 .base-class 的全部样式。这样，.new-class 就包含了 .base-class 中定义的颜色和字体大小。同时，我们还可以在 .new-class 中定义新的样式，例如这里的 font-weight: bold;。
值得注意的是，在样式的继承中，继承的基类必须在子类中定义之前。这是因为 LESS 调用样式的继承是在编译时完成的，而编译的过程是按照代码书写的顺序进行的。
继承多个类
在 LESS 中，当一个样式需要继承多个基类时，我们只需要在 extend 中加上需要继承的多个类名，用逗号分隔即可。例如：
-- -------------------- ---- -------
------------- -
------ ----
-
------------- -
---------- -----
-
---------- -
----------------------- ---------------
------------ -----
-在这个例子中，我们定义了两个基类，并在 .new-class 中继承了这两个基类的全部样式。这样，.new-class 就拥有了两个基类中定义的样式。
混合器
在 LESS 中，还有一种类似于函数的东西，叫做混合器（Mixins）。混合器可以接受参数，并在不同的样式中进行调用。通过混合器，我们可以定义一个带参数的样式函数，然后在多个样式中进行调用。混合器的语法如下：
.mixin-name(@param1, @param2) {
color: @param1;
font-size: @param2;
}在上述代码中，我们定义了一个混合器，名为 .mixin-name，它接受两个参数 @param1 和 @param2。在混合器内部，我们可以使用这两个参数，为样式设置颜色和字体大小等属性。接下来，我们可以在其他样式中调用这个混合器：
.new-class {
.mixin-name(blue, 14px);
font-weight: bold;
}在上述代码中，我们使用 .new-class 样式中调用了 .mixin-name 混合器，并且传入了两个参数 blue 和 14px。这样就可以在 .new-class 样式中设置该样式的颜色和字体大小了。
结论
通过 LESS 中的样式继承和混合器，我们可以在前端开发中实现代码重用，大幅度减少代码量，并且有助于我们更好地组织代码，从而提高代码的可维护性和可读性。同时，了解样式继承和混合器也有助于我们更好地理解和运用 LESS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ff1182e7021665e0018a0