less 编译默认不剔除未调用的 mixin，因其属编译期文本处理，不分析调用链；需用 @import (reference) 或手动检查调用才能避免冗余输出。
Less 编译时 Mixin 不会被自动剔除
Less 编译器（如 lessc、webpack 的 less-loader）默认不做“死代码消除”——.clearfix()、.flex-center() 这类定义过的 mixin，哪怕从未被调用，也会原样保留在输出 CSS 中（只要它被 @import 或直接写在作用域内）。这不是 bug，是设计行为：Less 是编译期文本处理，不分析调用链。
未使用 Mixin 出现在 CSS 中的典型表现
你看到的不是空规则，而是 mixin 展开后的完整 CSS 块，比如：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
这说明该 mixin 被“无参调用”或“意外展开”了。常见诱因包括：
- 写了
.clearfix {}（没加括号），Less 会把它当选择器而非 mixin 调用，导致生成空规则 + 内部样式全量输出 - 在
@import的文件中定义了 mixin，但主文件里没调用，而该 mixin 内部有顶层声明（如body { ... }）——Less 会把顶层语句直接透出 - 用了
!important或嵌套时意外触发了隐式调用（如&:hover { .mixin-name; }没写括号）
如何确认某个 mixin 是否真被调用
靠肉眼检查不可靠。推荐两个实操方式：
- 临时注释掉 mixin 定义，重新编译，观察对应 CSS 是否消失；若没变，说明它根本没被调用
- 在 mixin 定义末尾加一句
// DEBUG: used，再全局搜索编译后 CSS 中是否含这行注释——Less 默认保留注释，且只保留在被实际展开的位置 - 用
lessc --verbose（v4.2+）可看到解析阶段的 mixin 注册日志，但不显示调用位置；更准的是配合 VS Code 插件 “Easy Less” 的“Go to Definition”反查引用
真正有效的优化手段
想让未使用 mixin 彻底不出现在最终 CSS 中，只能从组织方式入手：
- 把所有通用 mixin 放进单独文件（如
mixins.less），并在主入口用@import (reference) "mixins.less";——(reference)模式不会输出任何内容，只提供定义 - 避免在 mixin 文件里写任何顶层样式（如
html { box-sizing: border-box; }），这类语句在(reference)下仍会透出，必须挪到主样式文件 - 对项目级高频 mixin（如主题色工具），改用
function+color()等运行时计算替代，但注意 Less 函数无法生成选择器，适用场景有限
最常被忽略的一点：Webpack 项目里如果用了 less-loader，它的 additionalData 配置会自动注入内容，可能悄悄引入未使用的 mixin——检查 lessOptions.additionalData 是否包含 @import 语句。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
