LESS（Leaner CSS）是一种 CSS 预处理器，其提供了一些便捷的工具来简化样式表的编写过程。其中之一就是属性继承，它允许开发人员在样式表中重复利用样式代码。
属性继承的基本概念
属性继承是一种通过定义一组基础样式集合，让其他样式表继承它们的方法。这样可以有效地减少代码量，并且使样式表更加易于维护和管理。
在 LESS 中，属性继承使用 & 符号来定义。& 符号代表“父节点选择器”，意思是选择器中的每个 “&” 都将被替换为其父选择器。“&” 符号只能出现在选择器的最前面。
示例代码
首先，让我们看一个使用属性继承的简单示例代码：
-- -------------------- ---- -------
-- ------
----- -
---------- -----
------------ ----
-------- -----
----------------- --------
-
-- ----
-------- -
- -
------ --------
-
------
----------- --- ----- --------
-在这个示例中，我们定义了一个 post 类，它包含了一些基本的样式属性。然后，我们定义了一个 comment 类，它继承了 post 类的基础属性，同时添加了一个额外的 border-top 样式。请注意，我们在 comment 类的选择器中使用了 & 符号来代表 comment 类的父节点选择器，即 .post。
更多示例
让我们再看一个更实际的示例：
-- -------------------- ---- -------
-- ------
---- -
-------- -----
-------------- ----
------- -----
------- --------
---------- -----
------------ -----
------ --------
----------- -------
----------- ---------------- -----
-
-- ----
------------ -
----------------- --------
- -
------- -
----------------- --------
-
-
-
-------------- -
----------------- --------
- -
------- -
----------------- --------
-
-
-
------------ -
----------------- --------
- -
------- -
----------------- --------
-
-
-
----------- -
----------------- --------
- -
------- -
----------------- --------
-
-
-在这个示例中，我们定义了一个 btn 类，并为其设置了一些常见属性。然后，我们定义了四个子类 btn-primary、btn-secondary、btn-success 和 btn-danger，它们分别继承了 btn 类的全部属性，并添加了自己的背景颜色。另外，我们还使用了 & 符号，为这些子类添加了悬停后的背景颜色。
属性继承的优点
属性继承的优点如下：
- 减少代码冗余。使用属性继承，您可以在基本样式集合中定义一次样式，然后在其他样式表中重复使用它。这有助于减少代码的冗余，并简化样式表的管理和维护。
- 加速开发。重复使用相同样式代码也意味着您可以更快地开发和修改样式表，而不必反复编写相同的代码。
- 方便的维护。当您需要更改基础样式集合中的样式时，所有继承该样式的样式表也将随之更改。
结论
在 LESS 中，属性继承是一种优化 CSS 样式表的好方法。它使代码更容易维护，减少了代码冗余，加速了开发。我希望这篇文章能为你提供一些基础知识和实践建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751088a050cf9039c196206