less的extend是编译期选择器合并而非css继承，它将被继承选择器与当前选择器并列输出（如.btn, .primary-btn{color:blue}），不产生运行时继承效果，也不支持伪类、变量插值或跨媒体查询引用。
Less 中 extend 不是 CSS 继承，而是选择器合并
很多人以为 extend 能像 inherit 那样把某个属性“传给子元素”，其实完全不是。Less 的 extend 是编译期的语法糖，作用是让多个选择器共享同一套样式声明——它会把被 extend 的选择器名“塞进”当前选择器的 CSS 规则里，生成更紧凑的选择器列表。比如：
.btn { color: blue; }
.primary-btn:extend(.btn) {}
编译后是：.btn, .primary-btn { color: blue; }，而不是给 .primary-btn 添加继承行为。
想在指定选择器内“局部复用样式”，extend 必须写在作用域内
如果希望只在某个父容器下生效（比如仅在 .card 内部让 .title 复用 .heading 样式），不能直接写 .title:extend(.heading)，否则全局生效。正确做法是把 extend 放进嵌套结构中：
.card {
.title:extend(.heading) {}
}
这样编译结果是：.heading, .card .title { /* 原 .heading 样式 */ }。关键点：
-
extend必须出现在嵌套块内部，且左侧选择器需带父级上下文（如.card .title） - 不能对伪类/属性选择器直接 extend（如
:hover或[data-id]），Less 5.0+ 才部分支持，旧版会报错Extend syntax is not supported in this context - 如果
.heading本身有嵌套规则（比如.heading strong），extend不会递归合并这些后代选择器
extend 和 mixin 的核心区别：要不要生成独立选择器
这是最容易选错的地方。如果你只是想复用样式声明，且不希望生成额外的 CSS 选择器（比如避免污染全局、或减少冗余 CSS），mixin 更安全：
.heading-style() {
font-size: 1.5rem;
font-weight: bold;
}
.card .title {
.heading-style();
}
编译后只有 .card .title { ... } 一条规则；而 extend 一定会把原选择器也带上，导致 .heading 的样式始终存在，哪怕你某天删了 .heading 元素，CSS 文件里还留着它。
所以真正该用 extend 的场景很窄：
- 你明确需要两个语义不同但视觉完全一致的选择器（如
.btn和.action-link） - 你在维护遗留项目，CSS 选择器已固定，不能改 HTML 类名，只能靠合并规则“假装”它们一样
- 你确认不会单独修改其中某一个的选择器行为（因为改
.heading就等于改.card .title）
常见报错和绕过方式
遇到 Cannot extend selector outside of root ruleset，说明你在顶层（非嵌套）用了带上下文的 extend，比如：
.card .title:extend(.heading) {} // ❌ 报错
解决方法只有两个：
- 把整个块包进父选择器里：
.card { .title:extend(.heading) {} } - 改用 mixin（推荐）
另外，extend 不支持变量插值：@base: .heading; .title:extend(@base) 会直接报错，Less 不解析变量中的选择器名。
真正难处理的不是语法，而是团队协作时别人看不懂为什么改了一个 class 却影响了另一个看起来无关的模块——extend 的隐式耦合太强，除非有强约束，否则建议默认用 mixin 或 CSS 自定义属性替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
