less的@extend本身不导致选择器暴涨，而是误用场景（如深层嵌套+all、跨文件未import、当mixin用）引发编译器生成大量并列选择器。
Less 的 @extend 本身不“让选择器暴涨”，而是你用错了场景或写法，导致编译器被迫生成大量并列选择器——这不是功能缺陷，是机制被误触发的结果。
目标选择器嵌套过深 + all 关键字引发递归合并
当你对一个含多层嵌套的选择器使用 :extend(.nav all)，Less 会把所有子规则都拉出来，逐条合并。比如：
.nav {
color: #333;
&:hover { text-decoration: underline; }
&.active { font-weight: bold; }
.dropdown { margin-top: 4px; }
}
如果三个组件分别写 .mobile-nav:extend(.nav all)、.sidebar-nav:extend(.nav all)、.footer-nav:extend(.nav all)，最终 CSS 里会出现：
.nav:hover, .mobile-nav:hover, .sidebar-nav:hover, .footer-nav:hover { text-decoration: underline; }
.nav.active, .mobile-nav.active, .sidebar-nav.active, .footer-nav.active { font-weight: bold; }
.nav .dropdown, .mobile-nav .dropdown, .sidebar-nav .dropdown, .footer-nav .dropdown { margin-top: 4px; }
- 每一条嵌套规则都会被复制 N 次，N = 继承它的组件数
-
all不是“选中全部”，而是“把当前选择器作用域内所有显式定义的嵌套块都展开合并” - 超过 2 层嵌套（如
.layout .header .nav）再:extend()，选择器长度和数量会指数级上升
跨文件未 @import 或用了 @import (reference)
@extend 只在当前 AST 上下文生效，它不会跨文件搜索目标。常见失效链：
- 你在
buttons.less里写.btn-primary:extend(.icon) - 但
.icon定义在icons.less中，且没加@import "icons.less" - 结果：
.btn-primary独立输出，.icon也照常输出 → 表面看是“重复”，实为继承失败 - 更糟的是：用了
@import (reference) "icons.less"→.icon根本不输出 CSS，@extend找不到目标，退化成样式复制，体积反而更大
验证方式：打开编译后 CSS，搜 .icon, .btn-primary —— 如果没出现逗号分隔的联合选择器，说明 @extend 没生效。
误把 @extend 当 mixin 用，却又要传参或动态控制
@extend 不支持参数、变量、条件判断。一旦你试图硬套，就会催生补丁式写法：
- 想让不同按钮有不同颜色？写
.btn-blue:extend(.btn)、.btn-red:extend(.btn)……最后 CSS 里堆满.btn, .btn-blue, .btn-red, .btn-green, ... - 想响应断点？写
@media (max-width: 768px) { .mobile-btn:extend(.btn all) }—— 但前提是.btn在该媒体查询内已有完整定义，否则只继承外层规则，断点逻辑还得另写 - 想组合伪类？
.item:hover:extend(.base:hover)直接报错：Extend syntax is not allowed in pseudo-classes
这类需求本质该用 mixin，强行用 @extend 只会让选择器列表越来越长，且无法局部覆盖。
真正容易被忽略的点是：@extend 的合并行为不可逆、不可调试。编译后你看到的每一条联合选择器，都绑定着原始定义位置；改一处基类，所有继承者全被动更新，而 DevTools 里点击某条样式，可能跳转到完全无关的文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
