LESS 是一种 CSS 预处理器，可以帮助前端开发者更加高效地编写 CSS 代码。在 LESS 中，继承是一种非常常见的用法，可以帮助我们避免代码冗余，提高代码复用率。本文将深入浅出地介绍 LESS 的继承用法，包括如何定义继承、如何使用继承、继承的注意事项等。
定义继承
在 LESS 中，继承的定义使用 & 符号。例如，我们定义一个基础的 .button 类，然后定义一个 .primary-button 类，它继承了 .button 类的样式：
-- -------------------- ---- ------- ------- - -------- ------------- -------- ---- ----- ------- --- ----- ----- -------------- ---- - --------------- - - - ----------------- -------- ------ ----- - ------- - ----------------- -------- - -展开代码
在上面的代码中，我们使用 & 符号来定义 .primary-button 类继承了 .button 类的样式。在 .primary-button 类中，我们定义了 background-color 和 color 样式，然后使用 &:hover 来定义鼠标悬停时的样式。
使用继承
在 LESS 中，使用继承非常简单，只需要在类名后面加上 :extend() 函数即可。例如，我们在 HTML 中使用 .primary-button 类：
<button class="primary-button">Click me</button>
在 LESS 中，我们可以这样定义 .primary-button 类：
-- -------------------- ---- ------- --------------- - ------------------ - - ----------------- -------- ------ ----- - ------- - ----------------- -------- - -展开代码
在上面的代码中，我们使用 &:extend() 函数来继承了 .button 类的样式。然后在 .primary-button 类中，我们定义了 background-color 和 color 样式，然后使用 &:hover 来定义鼠标悬停时的样式。
继承的注意事项
在使用继承时，需要注意以下几个问题：
- 继承只能继承一个选择器的样式。例如，我们不能同时继承
.button和.active类的样式。 - 继承会增加 CSS 文件的大小。如果继承了很多类的样式，可能会导致 CSS 文件变得很大。
- 继承会增加 CSS 的复杂度。如果继承了很多类的样式，可能会导致 CSS 的层级关系变得很复杂，难以维护。
因此，在使用继承时，需要慎重考虑，避免过度使用继承，导致代码难以维护。
示例代码
下面是一个完整的示例代码，演示了如何使用 LESS 的继承：
-- -------------------- ---- ------- ------- - -------- ------------- -------- ---- ----- ------- --- ----- ----- -------------- ---- - --------------- - ------------------ - - ----------------- -------- ------ ----- - ------- - ----------------- -------- - - ----------------- - ------------------ - - ----------------- -------- ------ ----- - ------- - ----------------- -------- - - --------------- - ------------------ - - ----------------- -------- ------ ----- - ------- - ----------------- -------- - -展开代码
在上面的代码中，我们定义了 .button 类作为基础样式，然后定义了 .primary-button、.secondary-button 和 .warning-button 类，它们都继承了 .button 类的样式。然后在每个类中定义自己的样式，例如 .primary-button 类定义了背景色为蓝色，文字颜色为白色，鼠标悬停时的背景色为深蓝色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d223dca941bf713441a952
