:extend()静默失效导致视觉重复，因其仅在目标与基类共存于同一编译上下文且字符串完全匹配时才合并；否则各自输出，常见原因包括跨文件未@import、伪类未加all、基类非顶层声明、变量拼接等。
Less 的 :extend() 不是“自动去重工具”，它根本不会扫描已生成的 CSS 再合并；所谓“异常 CSS”，90% 是 :extend() 静默失败后，两个选择器各自输出造成的视觉重复，而非语法错误。
为什么 :extend() 看起来生效了，实际却没合并
它只在目标选择器与被扩展选择器**共存于同一编译上下文**、且字符串完全匹配时才触发合并。否则不报错、不警告，直接放弃——你看到的“.btn, .btn-primary { … }”其实是两套独立规则拼在一起。
- 基类声明不在顶层：比如写在
@media块里、或前面有空行/注释，Less 解析器找不到声明，:extend()就失效 - 跨文件未
@import：.btn-primary:extend(.btn) 但button.less没被当前文件@import，编译时连声明都看不到 - 伪类或嵌套结构没加
all：.btn:hover 是嵌套写的，而你只写.btn-primary:extend(.btn)，hover 规则就不会合并 - 用了变量拼接的选择器：
.@{name}这种动态生成的类名，:extend()完全无法解析
:extend(.base) 和 :extend(.base all) 差在哪
区别在于是否穿透嵌套结构。不加 all 只匹配顶层选择器字符串；加了才把 &:hover、&:focus、&.active 这类嵌套规则一并合并。
.base { color: red; &:hover { text-decoration: underline; } }-
.x:extend(.base)→ 输出：.base, .x { color: red; }，但.x:hover不出现 -
.x:extend(.base all)→ 输出：.base, .x { color: red; }+.base:hover, .x:hover { text-decoration: underline; }
怎么确认 :extend() 真正跑起来了
最可靠的方法不是看输出，而是“破坏性验证”：临时删掉基类定义（比如把 .btn { … } 整段注释掉），再编译。
- 如果报错
Extend directive references selector that is not declared→ 说明之前是生效的 - 如果不报错，CSS 正常生成 → 说明它一直就没起作用，只是两个选择器各自输出
- 注意：这个测试必须在同一个编译入口下做，不能只删子文件而漏掉
@import链
真正难调试的不是语法写错，而是它“不声不响就绕过了你”。只要基类没被当前上下文看见，:extend() 就等于不存在——你得先确保它被加载、被识别、被完整匹配，而不是盯着输出 CSS 找“为什么没合并”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
