:extend()能精简css体积的前提是成功合并选择器，否则退化为声明复制导致体积增大；最常见失效原因是被继承选择器（如.btn）未真实输出（如用@import(reference)引入），或未加all关键字、路径不匹配、跨文件未用@import(once)等。
:extend() 能真正精简 CSS 体积，但前提是它实际完成了选择器合并——否则只是白写，甚至让 CSS 更臃肿。
为什么写了 :extend(.btn) 却没减少 CSS 行数
最常见原因是目标选择器根本没出现在最终 CSS 中。比如你用 @import (reference) "base.less" 引入了 .btn，它只提供定义、不输出样式，:extend() 就无处可继，编译器会退化成复制整套声明，体积反而变大。
- 确认
.btn所在文件是否用了@import (once)或直接@import（不能是reference） - 检查最终生成的 CSS 文件里是否存在独立的
.btn { ... }规则；没有，就说明继承失效 - 多个文件各自
@import "base.less"且没加(once)，会导致.btn被重复输出多份，:extend()在不同文件里继承的是不同副本，无法跨文件合并
:extend(.x all) 中的 all 关键字为什么必须加
不加 all，只继承目标选择器顶层的直系声明；所有嵌套规则（如 &:hover、&.is-active）全被忽略。
-
.btn { color: blue; &:hover { color: red; } }→.btn-primary:extend(.btn)只拿到color: blue -
.btn-primary:extend(.btn all)才能同时生成.btn:hover, .btn-primary:hover { color: red; } -
all不是“继承所有东西”，它只递归继承当前选择器作用域内显式定义的嵌套规则，不会跨文件或跨层级推导
哪些写法会让 :extend() 静默失败或报错
它不是运行时继承，而是编译期静态匹配，路径错一点、结构差一层，就直接失效。
- 路径不一致：
.utils > .text-muted是完整目标，写成.text-muted或.utils .text-muted都不匹配 - 伪类内使用：
.item:hover:extend(.base:hover)会报错Extend syntax is not allowed in pseudo-classes - 媒体查询内继承：
@media (max-width: 768px) { .mobile-nav:extend(.nav all) }仅当.nav在该断点内已有完整定义才有效；否则只继承外层.nav，断点内的规则不会被拉进来 - 通配导入：
@import "components/*.less"路径不可静态判定，(once)失效，:extend()无法可靠匹配
什么时候该放弃 :extend()，改用 .mixin()
它本质是选择器合并，不是逻辑抽象。需要变量、计算、动态响应或组合伪类时，硬套只会卡死。
- 要传参：比如
.rounded(@r: 4px)或.bg(@color)，:extend()写死就废了 - 要响应断点变化：媒体查询内需差异化输出，
:extend()拿不到上下文值 - 要配合 guard 或循环：例如栅格系统
.col(@span) { width: percentage(@span / 12); }，@span值不同，产出不同，:extend()无法支持 - 要覆盖第三方样式（如
.ant-btn）：嵌套 +:extend()会进一步拉高选择器权重，后续更难覆盖
别信编辑器高亮或编译日志，唯一可靠方式是打开最终生成的 CSS 文件肉眼查：找并列选择器，比如 .btn, .btn-primary, .btn-secondary { } —— 这才是成功合并的标志。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
