less 的 :extend() 仅在编译时合并 css 规则，不修改 html class；失败主因是目标选择器未输出（如用 @import (reference)）、定义位置不当或未加 all 修饰符；%占位符适用于不输出基类的样式复用，而动态样式应选用 mixin。
Less 的 :extend() 不是用来“减少类名定义”的，它根本不会删掉或合并 HTML 中的 class，只在编译时合并 CSS 规则。如果你指望写个 .btn-primary:extend(.btn) 就能让页面里所有 class="btn-primary" 自动变成 class="btn"，那会白忙活——它不碰 DOM，只改 CSS 输出。
为什么 .btn-primary:extend(.btn) 编译后没变小？
最常见原因是目标选择器根本没输出。比如你用了 @import (reference) "base.less"，而 .btn 正好定义在 base.less 里，那它压根不会生成 CSS；:extend() 找不到可合并的目标，就退化成复制整套样式，体积反而更大。
- 检查编译后的 CSS：如果看到
.btn-primary { ... }单独成块，没和.btn出现在同一行选择器里，说明继承失败 - 确认
.btn是通过@import (once)或普通@import引入的，不是(reference) - 确保
.btn定义在:extend()调用之前，且没被嵌套在其他规则里（如.wrapper { .btn { ... } }）
:extend(.btn all) 和 :extend(.btn) 差在哪？
不加 all 只继承顶层规则；加了才递归合并嵌套结构，比如 .btn:hover、.btn:focus 这些。
-
.btn-primary:extend(.btn)→ 只合并.btn本身的声明 -
.btn-primary:extend(.btn all)→ 同时合并.btn:hover、.btn:disabled等所有嵌套规则 - 如果基类用了
&:hover写法，必须加all，否则 hover 样式不会被继承
什么时候该换用 %占位符而不是 .class？
当你只想复用样式逻辑，又不想让基类本身出现在最终 CSS 里，就该用 % 占位符。
-
%icon-reset { display: inline-block; font-size: 0; }→ 编译后不输出任何 CSS -
.btn-icon::before { &:extend(%icon-reset); }→ 编译后变成.btn-icon::before { ... }，且多个调用会合并到同一规则块 - 不能嵌套：
.wrapper { %reset { ... } }是非法语法，%必须顶层独立声明 - 跨文件使用前，必须先
@import含%的文件，顺序不能颠倒
真正难的是判断“该不该用 :extend()”。它只适合那些永远固定、不带参数、不随断点动态变化的样式归并。一旦你开始想传颜色、改圆角、适配不同屏幕，就得切回 .mixin()——不是语法不行，是设计意图错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
