Less 的 :extend() 是编译期选择器合并机制，非 CSS 继承；失效主因是目标选择器未输出到最终 CSS（如 @import (reference)）；需确保路径一致、加 all 才递归继承嵌套规则；嵌套中须带完整上下文；传参、伪类、变量、媒体查询等场景应改用 mixin。
Less 的 :extend() 不是 CSS 继承，它不会让子元素“继承”父元素的样式；它是编译期的选择器合并机制，只在生成 CSS 时把多个选择器并列输出。
为什么写了 :extend(.btn) 却没生效？
最常见原因是目标选择器根本没被输出到最终 CSS 中。比如你用 @import (reference) "base.less" 引入了 .btn，它只提供定义、不生成样式，:extend() 就无处可继，退化为整块复制声明。
- 检查编译后的 CSS 文件：搜
.btn, .btn-primary—— 如果只有.btn-primary { ... }单独成块，说明继承失败 - 确保被继承的选择器是顶层、已输出的（不能是
@import (reference)或嵌套在未调用 mixin 里的） - 路径必须完全一致：
.utils > .text-muted不能用.text-muted或.utils .text-muted去 extend
:extend(.x all) 中的 all 到底要不要加？
要加，而且必须加在末尾。不加 all，只继承目标选择器直接声明的样式；加了才递归合并其内部嵌套规则（比如 .btn:hover、.btn.is-active）。
.btn { color: blue; &:hover { color: red; } }-
.btn-primary:extend(.btn)→ 只拿到color: blue -
.btn-primary:extend(.btn all)→ 同时拿到color: blue和.btn-primary:hover { color: red }
嵌套结构里怎么局部使用 :extend()？
想让 .card .title 只在 .card 内复用 .heading 样式，不能写全局 .title:extend(.heading)，必须把 :extend() 放进嵌套作用域里：
立即学习“前端免费学习笔记（深入）”；
.card {
.title:extend(.heading all) {}
}这样编译结果是：.heading, .card .title { /* 原 .heading 样式 */ }。关键点：:extend() 左侧的选择器必须带完整上下文（如 .card .title），否则会变成全局匹配。
什么时候该换用 mixin 而不是 :extend()？
只要涉及以下任一情况，:extend() 就不合适，必须改用 mixin：
- 需要传参（比如
.btn-style(@color)） - 要控制伪类组合（
.btn:hover:extend(.base:hover)会报错） - 目标选择器含变量插值（
.@{name}:extend(...)不支持） - 媒体查询内引用响应式规则（
@media {... .mobile-nav:extend(.nav all)}仅当.nav在该断点内已定义才有效）
真正容易被忽略的是：extend 后的选择器耦合度极高——改一个基类，所有 extend 它的地方都会被动更新，而这种依赖关系在 CSS 文件里完全不可见，调试时只能靠肉眼查编译结果。
