LESS 是一种 CSS 预处理器，允许在 CSS 中使用变量、函数、嵌套和循环等特性。其中，继承是 LESS 的一个强大特性，可以避免重复编写样式，提高代码的复用性和可维护性。本文将介绍如何在 LESS 中使用继承样式。
基本语法
在 LESS 中，通过 & 符号来指定当前选择器的上一级选择器。例如：
------- -
---------- -----
--------- -
----------------- --------
------ -----
-
-上述代码中，.button 和 .button.primary 共享了 font-size 属性，同时 .button.primary 继承了 .button 的其他样式。
继承选择器
除了使用 & 符号指定上一级选择器，LESS 还支持使用 :extend() 指令来继承其他选择器的样式。例如：
------ - ------ ---- - ---------------- - ---------------- ------- --- ----- ---- -
上述代码中，input[type=text] 继承了 .error 的样式，并自定义了 border 样式。使用 :extend() 指令时，需要指定要继承的选择器，并加上 all 或 all-within 来指定要继承的属性类型。例如：
---- - ------ ---- ----------------- ------- ------- --- ----- ------ - ---- - ------------ ----- -
上述代码中，.bar 继承了 .foo 的所有属性，包括 color、background-color 和 border。
继承类
除了继承选择器，LESS 还支持继承类。继承类是通过 /.classname 语法来定义的，其中 . 表示继承，classname 表示要继承的类名。例如：
------ - ------ ---- - ------------------ - ------- --- ----- ---- -
上述代码中，.bad-input 继承了 .error 的样式，并自定义了 border 样式。需要注意的是，继承类只能继承单个类，无法继承多个类。
属性继承
使用继承时，可以选择继承选择器或继承类的某些属性，而不是全部属性。例如：
------- - ---------- ----- ------------ ---- -------- ---- ----- - -------- - ------------------ ----------------- -------- ------ ----- -
上述代码中，.primary 继承了 .button 的 font-size、line-height 和 padding 属性，但没有继承 background-color 和 color 属性。这样，可以减少代码冗余，提高代码复用性。
总结
通过本文的介绍，我们可以了解到在 LESS 中使用继承样式的基本语法和细节。使用继承样式可以避免重复编写样式，提高代码的复用性和可维护性。然而，在使用继承样式时，需要注意继承的属性选择，避免产生副作用。因此，在实际开发中，建议根据项目需要使用继承样式，提高代码的效率和质量。
参考示例代码：
------- -
---------- -----
--------- -
----------------- --------
------ -----
-
-
------ -
------ ----
-
---------------- -
----------------
------- --- ----- ----
-
---- -
------ ----
----------------- -------
------- --- ----- ------
-
---- -
------------ -----
-
------------------ -
------- --- ----- ----
-
------- -
---------- -----
------------ ----
-------- ---- -----
-
-------- -
------------------
----------------- --------
------ -----
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64706b8d968c7c53b0e8b416