LESS 是一种 CSS 预处理器，它提供了许多便利的语法和功能，其中之一就是继承（extend）功能。继承功能可以让我们在样式表中使用已有的样式，并将其应用于其他元素，从而减少代码量，提高代码的可维护性。本文将详细介绍 LESS 中的继承功能，并提供示例代码。
继承的语法
继承的语法非常简单，只需要使用 :extend() 函数即可。例如：
-- -------------------- ---- -------
------- -
------ -----
----------------- --------
------------- --------
-------- ------ -----
-------------- --------
------- -
----------------- --------
------------- --------
-
-
------------ -
------------------
-在上面的代码中，我们定义了一个 .button 类，它包含了按钮的基本样式，同时定义了 :hover 状态的样式。然后我们定义了一个 .btn-primary 类，并使用 :extend() 函数将 .button 类的样式应用于它。
使用 :extend() 函数时，需要传入一个选择器作为参数，该选择器用于指定要继承的样式。在上面的代码中，我们传入的参数是 .button，表示要继承 .button 类的样式。
需要注意的是，继承的样式只会被应用于被继承的选择器的直接子元素。在上面的代码中，.button 类包含了 :hover 状态的样式，但是这个样式不会被应用于 .btn-primary:hover，因为它不是 .btn-primary 的直接子元素。
继承的高级用法
除了基本的继承语法之外，LESS 还提供了一些高级的继承用法，可以让我们更加灵活地使用继承功能。
继承多个选择器的样式
有时候我们需要继承多个选择器的样式，这时可以使用逗号分隔多个选择器。例如：
.button, .link {
color: #007bff;
text-decoration: none;
}
.btn-primary {
&:extend(.button, .link);
}在上面的代码中，我们将 .button 和 .link 两个类的样式合并到了 .btn-primary 类中。
继承指定的样式
有时候我们只需要继承被继承选择器的某些样式，而不是全部样式。这时可以在 :extend() 函数中使用 all 和 none 关键字，或者使用 with 和 except 语句。例如：
-- -------------------- ---- -------
------- -
------ -----
----------------- --------
------------- --------
-------- ------ -----
-------------- --------
------- -
----------------- --------
------------- --------
-
-
------------ -
---------------- -----
-------------- --
-
-------------- -
---------------- ------
------------- ----
-
------------ -
---------------- ---- -------------- -------------------
-------------- --
-在上面的代码中，我们分别对 .btn-primary、.btn-secondary 和 .btn-success 类使用了不同的继承方式。其中：
.btn-primary类继承了.button类的所有样式，并覆盖了border-radius样式。.btn-secondary类继承了.button类的所有样式，但是不继承border-radius样式，并添加了border-width样式。.btn-success类只继承了.button类的border-color和background-color样式，并覆盖了border-radius样式。
继承嵌套选择器的样式
有时候我们需要继承嵌套选择器的样式，这时可以使用 & 符号来表示父选择器。例如：
-- -------------------- ---- -------
----- -
------- --- ----- -----
-------------- --------
------------ -
----------------- --------
-------------- --- ----- -----
-- -
----------- --
-------------- --
-
-
-
------ -
----------------
------------- --------
------------- -
-----------------------
----------------- --------
------------- --------
-
-在上面的代码中，我们定义了一个 .card 类和一个 .alert 类。.card 类包含了一个嵌套的 .card-header 类，它定义了卡片的头部样式。然后我们使用 :extend() 函数将 .card 类的样式应用于 .alert 类，并在其中嵌套了一个 .alert-header 类，它继承了 .card-header 类的样式，并覆盖了背景颜色和边框颜色。
总结
继承是 LESS 中非常有用的功能，它可以帮助我们减少代码量，提高代码的可维护性。本文介绍了继承的基本语法和一些高级用法，并提供了示例代码。希望能够帮助读者更好地理解 LESS 中的继承功能，并在实际开发中运用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f535a12b3ccec22fd5953d