:extend()编译后css仍很大，最常见原因是目标类未真实输出（如用@import (reference)引入或定义在嵌套结构中），导致继承失败而退化为样式复制；必须确保目标选择器顶层独立、路径一致，并加all才继承伪类等嵌套规则。
:extend() 本身不降低 HTML 中的类名冗余，只降低编译后 CSS 文件里的规则重复——它通过合并选择器实现，不是删 class，也不是改 DOM。
为什么 :extend() 编译后 CSS 还是很大？
最常见原因是目标类根本没输出，:extend() 找不到可合并的对象，就退化成复制整套样式：
- 用了
@import (reference)引入基类（比如.btn定义在base.less里），那.btn根本不会生成 CSS，.btn-primary:extend(.btn)就只能自己写一遍全部声明 -
.btn定义在嵌套结构里，如.wrapper { .btn { ... } }，此时.btn不是顶层独立选择器，:extend()匹配失败 - 跨文件引用时路径不一致：
@import "base.less"和@import "./base.less"在 Less 看来是两个文件，.btn不会被识别为同一目标
:extend(.x) 和 :extend(.x all) 差在哪？
不加 all 只继承目标选择器自身的声明；加了才递归合并所有嵌套状态规则：
-
.btn-primary:extend(.btn)→ 只合并.btn { ... }本体 -
.btn-primary:extend(.btn all)→ 同时合并.btn:hover、.btn:disabled、.btn:focus等所有子规则 - 如果基类用了
&:hover写法，不加all就完全继承不到 hover 样式
怎么确认 :extend() 真生效了？
别信代码写了就起效，唯一可靠方式是打开编译后的 CSS 文件肉眼查：
- 成功：看到类似
.btn, .btn-primary, .btn-secondary { color: #007bff; padding: 6px 12px; }这种逗号分隔的联合选择器 - 失败：只看到孤立的
.btn-primary { ... }块，且旁边没有和.btn并列出现 - 注意检查是否被
@media包裹——:extend()不跨媒体查询继承，@media (min-width: 768px) { .mobile-btn:extend(.btn) }只会继承外层.btn，不会把断点内的.btn规则带进来
真正难的不是写 :extend()，而是判断它该不该用：它只适合那些永远固定、无参数、不随断点变化、且确定已在 CSS 中真实输出的类。一旦涉及颜色计算、尺寸响应或状态切换，就得切回 .mixin()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
