在 LESS 中，继承（Inheritance） 是一种让一个选择器复用另一个选择器所有样式规则的功能，它通过 :extend() 伪类实现。继承可以显著减少生成的 CSS 体积，避免重复代码，提高样式表的可维护性。

一、继承的基本语法

让 .选择器1 继承 .选择器2 的所有样式。编译后会将两个选择器合并（并集选择器），而不是复制样式。

.选择器1:extend(.选择器2) {
  // 可选：添加额外样式
}

示例：

.base-style {
  padding: 10px;
  color: #333;
}

.button {
  &:extend(.base-style); // 继承 .base-style
  background: blue;
}

编译后的 CSS：

.base-style,
.button {
  /* 合并选择器 */
  padding: 10px;
  color: #333;
}
.button {
  background: blue; /* 新增样式 */
}

二、两种写法

1、直接附加到选择器

.child:extend(.parent) {
  // 子类样式
}

2、嵌套在规则集内

.child {
  &:extend(.parent);
  // 子类样式
}

三、继承的关键特性

1、合并选择器

继承后，LESS 会将多个选择器合并为一个并集选择器，而不是复制样式代码。

2、支持所有选择器类型

可以继承类（.class）、ID（#id）、标签（div）、伪类（:hover）等。

.link:extend(a:hover) {
} // 继承伪类

3、可继承多个选择器

用逗号分隔多个被继承的选择器：

.new:extend(.style1, .style2) {
}

4、精确匹配

LESS 的继承是严格匹配选择器，不支持部分匹配或通配符：

.a:extend(.b) {
} // 仅匹配 .b，不匹配 .b .c 或 .b.x

5、不可被继承的场景

• 嵌套规则内的选择器（如 .parent .child）。
• 媒体查询内的选择器（如 @media (...) { .style }）。
• 带参数的选择器（如 .mixin(@param)）。

四、继承 vs 混合（Mixin）

特性	继承（:extend）	混合（Mixin）
实现方式	合并选择器，减少重复代码	复制样式代码到每个调用处
编译结果	生成更紧凑的 CSS（选择器合并）	可能产生重复样式（代码体积增大）
灵活性	仅继承完整规则集	可传参、支持条件逻辑
适用场景	需要优化 CSS 体积时	需要动态样式或复用代码块时

1、何时选择继承？

• 需要减少 CSS 文件大小。
• 被继承的样式是静态的（无需参数化）。

2、何时选择混合？

• 需要动态生成样式（如通过参数调整）。
• 复用代码块但不需要合并选择器。

五、实际应用场景

1、重置样式继承

.reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu {
  &:extend(.reset-list); // 继承重置样式
  display: flex;
}

2、主题样式复用

.theme-light {
  background: white;
  color: black;
}

.dialog {
  &:extend(.theme-light); // 继承主题
  border: 1px solid #ccc;
}

3、组件扩展

.alert {
  padding: 15px;
  border-radius: 4px;
}

.alert-error:extend(.alert) {
  background: #ffe6e6;
  color: red;
}

六、注意事项

1. 无法继承嵌套规则：只能继承顶层选择器，不能继承嵌套内的样式：

   .parent {
     .child {
       color: red;
     }
   }
   .new:extend(.parent .child) {
   } // 无效！

2. 媒体查询中的继承：继承不会跨媒体查询（@media）合并：

   @media (min-width: 768px) {
     .responsive {
       padding: 20px;
     }
   }
   .box:extend(.responsive) {
   } // 无效！

3. 性能优化：过度使用继承可能导致选择器冗长，适度使用即可。

七、总结

LESS 的继承通过 :extend() 实现，核心优势是 合并选择器 而非复制样式，适合优化 CSS 体积。相比混合（Mixin），它更静态但更高效。实际开发中可根据需求混合使用继承和混合宏，以达到代码复用和性能的最佳平衡。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24