:extend()能减小css体积的前提是静态匹配、目标已输出、路径一致；若未生效，主因是被继承选择器未真实输出（如@import(reference)导致缺失），或未加all关键字、导入方式不当。
:extend() 能显著减小 CSS 体积，但前提是它真正在编译时合并了选择器——不是写了就生效，而是必须满足静态可匹配、目标已输出、路径完全一致三个硬条件。
为什么写了 :extend(.btn all) 却没变小？
最常见原因是被继承的选择器根本没出现在最终 CSS 里。比如你用 @import (reference) "base.less" 引入了 .btn，它只提供定义、不输出样式，:extend() 就无处可继，退化成复制整套声明。
- 检查编译后的 CSS 文件：搜
.btn, .btn-primary, .btn-secondary—— 如果是并列出现，说明成功；如果只有.btn-primary { ... }单独成块，就是继承链断了 -
@import (once)必须配合使用，否则多个文件各自@import "base.less"，会生成多份.btn规则，:extend()在不同文件里分别继承不同副本 - 禁止用通配导入（如
@import "components/*.less"），路径不可静态判定，(once)失效
all 关键字到底要不要加？
要加，而且必须加在继承语句末尾：.btn-primary:extend(.btn all)。不加 all，只继承 .btn 直接声明的样式，像 .btn:hover、.btn.is-active 这类嵌套规则全被忽略。
-
.btn { color: blue; &:hover { color: red; } }→.btn-primary:extend(.btn)只拿到color: blue；加all才同时拿到 hover 状态 -
all不是“继承所有东西”，它只递归继承当前选择器作用域内显式定义的嵌套规则，不会跨层级或跨文件推导 - 写错路径也无效：比如目标是
.utils > .text-muted，你写成.text-muted或.utils .text-muted，都不匹配
哪些场景死磕 :extend() 反而更糟？
它不是万能复用语法，本质是选择器合并，不是逻辑抽象。传参、动态计算、伪类组合这些，它一律不支持。
- 需要变量控制值：比如
.rounded(@r: 4px)或.bg(@color)→ 必须用.mixin()，:extend()写死就废了 - 要继承带
&:hover的嵌套块：.item:hover:extend(.base:hover)直接报错，Extend syntax is not allowed in pseudo-classes - 媒体查询内继承响应式规则：
@media (max-width: 768px) { .mobile-nav:extend(.nav all) }仅当.nav在该断点内已有完整定义才有效；否则只继承外层.nav，断点内的规则不会被拉进来
如何确认 :extend() 真正在工作？
别信编辑器高亮或编译日志，唯一可靠方式是打开最终生成的 CSS 文件肉眼查。
- 搜索目标选择器（如
.icon）是否作为联合选择器的一部分出现：.icon, .btn-icon, .menu-icon { ... } - 如果发现同一基础类被多个不同路径继承（如
.header-icon:extend(.icon)和.footer-icon:extend(.icon)），但编译后是两组独立规则，说明它们引用的.icon实际来自不同@import路径，未收敛到统一入口 - 大型项目务必把所有可被继承的基础类（
.sr-only、.clearfix、.visually-hidden）收进单个_extends.less，全局只@import (once) "_extends.less"
:extend() 很安静，它不增加新 class，也不改变 DOM 结构，只是让编译器把多条规则压进同一行 CSS 声明里——但一旦路径、导入方式或 all 缺失，它就彻底静默失效，连 warning 都不抛。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
