:extend()未减小css体积的主因是被继承选择器未真实输出，如@import(reference)引入的.btn不生成css，导致extend退化为声明复制；须满足静态匹配、目标已输出、路径一致三条件才生效。
写了 :extend() 却没减小体积？大概率是被继承的选择器根本没出现在最终 CSS 里——它不是语法糖，而是编译期静态合并机制，不满足条件就退化成复制声明。
为什么 :extend(.btn all) 编译后还是大文件？
最常见原因是目标选择器未真实输出。比如你用 @import (reference) "base.less" 引入了 .btn，它只提供定义、不生成 CSS，:extend() 就找不到合并对象，只能把整套声明复制一遍。
- 检查编译后的 CSS 文件：搜
.btn，如果完全没出现，说明它被(reference)吃掉了 - 搜
.btn-primary：如果它是独立成块（如.btn-primary { color: blue; }），而非和.btn并列（如.btn, .btn-primary { }），就是继承失败 -
@import (once)必须显式写，且路径必须完全一致；./base和../shared/base被视为两个文件
all 关键字到底要不要加？
要加，而且必须加在末尾：.btn-primary:extend(.btn all)。不加 all，只继承 .btn 直接声明的属性，像 .btn:hover、.btn.is-active 这类嵌套规则全被忽略。
-
.btn { color: blue; &:hover { color: red; } }→:extend(.btn)只拿到color: blue - 加
all才同时拉入&:hover块，但仅限当前作用域内显式定义的嵌套，不会跨文件或跨层级推导 -
all不是“继承所有东西”，它不处理伪类组合（如:extend(.base:hover)直接报错）
哪些场景硬套 :extend() 反而更糟？
它本质是选择器合并，不是逻辑抽象。传参、动态计算、伪类嵌套这些，它一律不支持。
- 需要变量控制值：比如
.rounded(@r: 4px)或.bg(@color)→ 必须用.mixin()，:extend()写死就废了 - 媒体查询内继承：如
@media (max-width: 768px) { .mobile-nav:extend(.nav all) }，仅当.nav在该断点内已有完整定义才有效；否则只继承外层.nav，断点内的规则不会被拉进来 - 深层嵌套中调用：
.card { .header { &:extend(.text-center) { } } }是非法的，:extend()不允许出现在嵌套块内部
怎么确认 :extend() 真生效了？
别信代码写了就起效，打开编译后的 CSS 文件肉眼确认才是唯一可靠方式。
- 成功标志：出现逗号分隔的并列选择器，例如
.icon, .btn-icon, .menu-icon { overflow: hidden; text-overflow: ellipsis; } - 失败标志：只有孤立的
.btn-icon { }块，或目标选择器（如.icon）压根没出现在最终 CSS 中 - 占位符选择器
%icon-reset必须顶层声明，不能嵌套在.card { %inner {} }里，否则编译失败
真正难的不是写对语法，而是让被继承的选择器稳定、唯一、可预测地出现在最终输出里——这要求你严格控制 @import 方式、路径一致性、以及基础样式文件的组织粒度。一旦某个 .btn 在 A 文件里通过 (once) 引入，在 B 文件里又通过普通 @import 拉进来，:extend() 就会在两个上下文中分别匹配两份副本，体积反而更大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
