背景
LESS 是一种动态样式语言，属于 CSS 预处理器的一种，并且能够让 CSS 代码更加易于编写和维护。LESS 具有多重继承的能力，可以让开发者在编写 CSS 样式时更加便捷。
多重继承的概念
多重继承是指一个样式可以继承多个父样式的属性。
例如，有三个样式：
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ - ---- - ----------------- ---- - ----- - ----------------- ----- -
如果使用 LESS 实现多重继承，代码如下所示：
-- -------------------- ---- -------
---- -
------ ------
------- ------
----- -
----------------- ----
-
------ -
----------------- -----
-
-这样，在 HTML 中就可以调用这个样式：
<div class="box red"></div>
这个 div 的样式就会继承 .box 和 .red 的属性。
LESS 的多重继承
LESS 的多重继承与 CSS 的多重继承相同，只是 LESS 有一些扩展功能。
Extend 方法
使用 exten 方法，可以将一个样式继承到另一个样式上。实现方式是在样式的定义中使用 @extend 关键字声明父样式。
例如：
-- -------------------- ---- ------- ---------- - ------- --- ----- ----- ----------------- ----- ---------- ----- - -------------- - ------- ----------- ---------- ----- -
这样，.btn-big-style 样式就继承了 .btn-style 样式的属性，并且覆盖了 font-size 的属性值。
伪类的多重继承
LESS 也可以使用伪类多重继承，例如：
-- -------------------- ---- -------
---------- -
------- --- ----- -----
----------------- -----
------- -
----------------- -----
-
-
-------------- -
------- -----------
---------- -----
------- -
----------------- -----
-
-这个例子中，.btn-big-style 样式继承了 .btn-style 样式和 :hover 伪类，并覆盖了其中的 font-size 和 background-color 属性值。
总结
LESS 提供了多重继承的功能，使用起来非常方便。通过多重继承可以让 CSS 样式更加简洁、可维护性高，并且方便样式的复用。
需要注意的是，在使用多重继承的过程中要注意样式的继承顺序，保证父样式的属性在样式表中的排列顺序也是正确的。
示例代码
-- -------------------- ---- -------
-- -- --- -- --
---- -
------ ------
------- ------
-
-- -- --- -- --
---- -
----------------- ----
-
-- -- ---- -- --
----- -
----------------- -----
-
-- -- ----- -- --
------ -
------ ------
------- ------
---------- -
-------- ---
-
-
-- -- --------- -- --
---------- -
------- --- ----- -----
----------------- -----
---------- -----
------- -
----------------- -----
-
-
-- -- ------------- -- --
-------------- -
------- -----------
---------- -----
------- -
----------------- -----
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65463fc37d4982a6eb0180b5