less的extend不能替代嵌套，因其本质是选择器复用而非作用域继承；它仅合并顶层选择器声明，不递归处理伪类、媒体查询等子规则，且要求目标选择器同级定义、无嵌套上下文、无动态参数。
Less的extend为什么不能替代嵌套？
extend不是作用域继承，而是选择器复用指令：它让目标选择器“借用”另一个选择器的样式声明，但不生成新层级。比如.btn-primary:extend(.btn all)编译后是.btn, .btn-primary { ... }，而非.btn .btn-primary。很多人误以为extend能模拟嵌套逻辑，结果发现伪类、属性选择器、媒体查询全丢了——因为extend只匹配顶层选择器，不递归处理子规则。
哪些场景下extend真能压平CSS层级？
它适合合并语义相近、结构独立的类，且必须满足三个条件：同级定义、无嵌套上下文、无动态参数。常见有效用法包括：
- 基础组件变体：
.button--small:extend(.button all)→ 输出.button, .button--small，权重恒为 0,0,1,0 - 状态类复用：
.card.is-hovered:extend(.card all)→ 编译为.card, .card.is-hovered，避免写.card .is-hovered这种高权后代选择器 - 工具类注入：
.text-bold:extend(.font-weight-bold all)，前提是.font-weight-bold本身是扁平定义（不带嵌套）
注意：all关键字必须显式写出，否则只继承目标选择器自身的声明，不包含其hover、disabled等扩展规则。
extend和mixins在扁平化上的根本差异
mixins是复制粘贴式代码插入，每次调用都生成一份样式副本；extend是选择器合并，最终只保留一份CSS声明。这意味着：
- 体积：10个
.btn-variant类用mixins会重复输出padding、border等；用extend则只在.btn里写一次 - 覆盖性：
extend生成的选择器并列存在，后续规则可直接写.btn--small:hover覆盖，不用加父级前缀 - 限制：
extend无法传参，也不能在@media块内使用；mixins支持参数和条件判断，但会破坏扁平性
一个典型陷阱：.dialog-footer:extend(.footer all)如果.footer是在.dialog {}嵌套块里定义的，extend会失效——因为.footer不是顶层选择器，编译器找不到可匹配的独立规则。
为什么extend常被忽略或禁用？
构建链路中容易踩两个坑：
-
less-loader默认关闭extens支持，需手动开启：options: { math: 'always', javascriptEnabled: true, paths: [...] }，否则:extend语法直接报错 - PostCSS插件（如
cssnano）可能把.btn, .btn--small合并成.btn, .btn--small，但若中间夹着其他规则（比如@import引入的第三方样式），顺序错乱会导致覆盖失效 - VS Code Less插件对
extend语法高亮支持弱，容易写错空格（如.a: extend(.b all)多了一个空格就解析失败）
真正关键的点是：extend只在编译时起作用，它要求所有被扩展的目标选择器必须已定义、未被@import (reference)隐藏、且不在嵌套块内——这些约束比mixins严格得多，但一旦跑通，CSS体积和权重控制效果立竿见影。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
