less 的 extend 是编译期选择器合并机制，非运行时去重；仅当目标选择器与被扩展选择器共存于同一上下文且语法匹配（如加 all 才合并嵌套规则）时生效，否则静默失败或输出重复选择器。
Less 的 extend 不是用来“解决重复选择器”的补救手段，而是从源头避免冗余规则的编译期合并机制；它不会压缩已生成的 CSS，也不能后处理重复项。
为什么 extend 编译后还是看到多个相同选择器？
常见误解是以为 extend 能像 PostCSS 插件那样去 dedupe 已存在的 CSS 选择器。实际不是：extend 只在编译时把目标选择器和被扩展选择器“合并输出”，但前提是二者必须真实共存于同一编译上下文。
- 如果两个类（比如
.btn和.btn-primary）定义在不同文件、且未通过@import显式引入，.btn-primary:extend(.btn)会静默失败，最终各自独立输出 → 看似“重复”，实为未生效 - 如果用了
.btn-primary:extend(.btn)但没加all，而.btn:hover是嵌套写的，那:hover规则不会被合并，导致.btn和.btn-primary各自带一套 hover 声明 → 表面重复，实为匹配不全 - 多个类都
:extend(.base)，编译结果是.base, .a, .b, .c { ... }—— 这不是 bug，是预期行为；但若你期望的是单条.base { ... }+ 单独覆盖，那说明你误用了extend，该用变量或 mixin
.a:extend(.b) 和 .a:extend(.b all) 差在哪？
关键在嵌套规则是否参与合并。不加 all 时，只匹配顶层完全一致的选择器；加了才穿透嵌套结构。
-
.b { color: red; &:hover { text-decoration: underline; } }+.x:extend(.b)→ 输出：.b, .x { color: red; }，但.x:hover不会出现 - 同上 +
.x:extend(.b all)→ 输出：.b, .x { color: red; }+.b:hover, .x:hover { text-decoration: underline; } - 若目标是
.container .b，而你写.x:extend(.b)，哪怕 DOM 结构一致也不会匹配 ——extend匹配的是最终编译出的选择器字符串，不是语义
哪些情况 extend 必定不生效？
它不像 JS 那样有运行时兜底，失效即静默，调试困难。
- 跨文件未
@import：在button.less里:extend(.icon)，但icon.less没被导入 → 编译报错Extend directive references selector that is not declared - 目标被包裹在 media 查询、嵌套块或
@media内：如@media (min-width: 768px) { .btn { ... } }，外部无法:extend(.btn) - 目标由 mixin 动态生成：
.make-icon(@name) { .icon-@{name} { ... } }，调用后产生的.icon-home无法被:extend()引用 - 用了伪类/属性选择器当目标：
.btn:extend(.btn:hover)或.input:extend([type="text"])→ 报错，extend只接受纯类名、ID、属性选择器（不含伪类）
什么时候该放弃 extend，改用别的方案？
当发现要反复加 all、调换 @import 顺序、或者开始给每个状态单独写 :extend() 时，基本就该切到更可控的方式了。
- 需要传参控制颜色/尺寸/断点 → 改用
.btn-style(@color, @size)mixin - 只是想复用几行声明（如
display: flex; align-items: center;），且永不变化 → 留extend，但确保目标类是 flat、无嵌套、无条件分支的原子类 - 组件库中基础样式需隔离输出（如 utils.less 不应直接产出 CSS）→ 用
@import (reference) "utils.less"，再在业务文件里:extend() - 发现 Chrome DevTools 里某个元素样式来自 5 个不同选择器（
.base, .a, .b, .c, .d），权重难覆盖 → 说明extend用过头了，该用单一 class + CSS 自定义属性动态控制
最易被忽略的一点：Less 的 extend 是“选择器合并”，不是“样式继承”。它不改变层叠顺序，不产生新 class，也不影响 DOM。如果你正试图靠它来实现运行时样式切换或 BEM 的修饰符组合，大概率走错了路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
