Less本身不生成冗余CSS，冗余源于写法误用：无括号的.mixin被识别为普通类而输出空规则（如.clearfix{}），@import未加(reference)导致样式重复展开；正确做法是统一用.clearfix()声明与调用，并用@import (reference)隔离定义、@import (once)防重复引入。
Less 本身不生成冗余 CSS，冗余来自写法误用——比如把 .clearfix 当成类名写，实际它该是 .clearfix()；又或者用 @import 引入了带样式的内容，却没加 (reference) 控制输出。
为什么无括号的 .mixin 会直接输出空规则
Less 把 .btn-base（无括号）识别为普通 CSS 类选择器，只要声明就输出 .btn-base { }，哪怕你从没调用过它。这在全局 mixins 文件里尤其危险：一个 _mixins.less 被多处 @import，所有未调用的“伪类”都会打进最终 CSS。
- 正确写法必须带括号：
.btn-base() { padding: 8px; border: 1px solid #ccc; } - 调用时也必须带括号：
.primary-btn { .btn-base(); } - Vue/React scoped 样式下，漏括号可能意外让
.btn-base成为真实 class，被其他组件 class 属性命中 - 全局搜索正则
\.([a-zA-Z0-9\-]+)\s*\{，能快速定位所有漏括号的 mixin 声明
为什么 @import (reference) 没减少体积
@import (reference) 只抑制当前文件的 CSS 输出，不阻止被引用文件中非 (reference) 的导入所触发的样式展开。它不是“自动去重开关”，而是“定义隔离开关”。
- 如果
_mixins.less里写了@import "base.css"（没加(reference)），那即使你用@import (reference) "_mixins.less"，base.css的样式仍会照常输出 -
@import (reference)不影响 mixin 调用逻辑：只要.clearfix()被调用，它的内容就会编译进去 - 它会同时抑制
@keyframes、@font-face等——图标字体或动画失效常源于此 - 真正安全的模式是：变量和函数用
@import (reference)，基础样式块统一收进_extends.less并用@import (once)
什么时候该用 :extend() 而不是 .mixin()
:extend() 合并选择器，.mixin() 复制样式块。5 个按钮类继承同一基类，前者输出一行联合规则，后者生成 5 份完全相同的声明。
立即学习“前端免费学习笔记（深入）”；
-
:extend()生效前提是目标选择器真实存在且已输出——若.btn是通过@import (reference)引入的，它不输出，:extend()就退化为复制 - 不能继承伪类：
.item:hover:extend(.base:hover)会报错，连&:hover { &:extend(.base) }都不支持 - 跨文件使用前，必须确保
%icon-reset或.sr-only已被@import (once)加载，且顺序不能颠倒 - 需要传参、条件判断、循环生成变体时，
:extend()无能为力，硬套只会卡死开发流程
压缩参数为什么治标不治本
--compress 能删空行和注释，但它不合并选择器、不去重声明、也不修复空类。真正膨胀的根源是源码里混着的 .clearfix（没括号）、重复 @import、嵌套中未控制的 & 拼接。
-
lessc styles.less --compress适合快速减体积，但无法解决.btn { } .icon { }这类空规则 -
--clean-css更激进，但可能因合并选择器破坏层叠顺序（如伪元素或媒体查询错位） - 若输入文件本身含大量空行或块注释，
--compress仍会保留逻辑分隔，需先人工清理 - 空行只是表象；背后混着的空类、未收敛的
@import链、未加&控制的嵌套，才是让 CSS 越压越大的推手
