无法靠浏览器 DevTools 直接检测未使用的 Less 变量或 Mixin，因为它们在编译阶段就被展开或丢弃，最终 CSS 中无对应痕迹，检测必须回归源码层依赖静态分析或编译干预。
无法靠浏览器 DevTools 直接检测未使用的 Less 变量或 Mixin —— 它们在编译阶段就被展开或丢弃，最终 CSS 里根本不存在对应痕迹。 检测必须回到 Less 源码层，依赖静态分析或编译过程干预。
为什么浏览器里看不到未使用变量？
Less 变量（如 @primary-color）和私有 Mixin（如 .set-radius()）不是运行时实体。它们要么被静态替换进属性值，要么在编译时被完全跳过（未调用的点前缀 Mixin 不生成任何输出）。你在 DevTools 的 Styles 面板看到的只是最终 CSS，没有源码映射信息，自然无法反推哪些 @xxx 或 .xxx() 没被引用。
常见误判现象：
- 改了
@spacing-xs但某组件间距没变 → 实际是该变量根本没被那个组件的样式文件@import，或被同名变量在局部覆盖 - 删掉一个
.clearfix()定义后编译无报错 → 它可能从未被任何地方调用，也可能是被其他文件间接调用（比如通过@import "mixins"后又没显式调用）
用 lessc 配合 --verbose 和 --lint 检查未引用变量
lessc 命令行工具本身不报告“未使用”，但可通过组合参数暴露线索：
立即学习“前端免费学习笔记（深入）”；
- 加
--strict-math=on：强制数学表达式提前校验，若某变量参与计算却未定义，会直接报错（例如@gap: @spacing-xs * 2;中@spacing-xs缺失） - 加
--verbose并配合grep -i "undefined variable"：部分版本会在警告中提示类似variable @legacy-font is undefined，说明它被读取但未声明 - 手动注释法：临时把疑似废弃的变量设为
@xxx: null;，再编译；如果某处用了@{xxx}插值或@xxx + 1px，会触发类型错误，从而定位调用点
识别未调用的 Mixin（尤其是私有 .xxx()）
私有 Mixin（以点开头、带括号定义，如 .size(@w, @h) { ... }）只要没被任何顶层规则或其它 Mixin 显式调用，就不会出现在输出中——但这不等于“可安全删除”。判断依据是调用链是否可达：
- 全局搜索
.size(或.size;（注意括号和分号），确认所有调用点；.size（无括号）是无效写法，不会触发调用 - 检查是否被
&或选择器插值间接调用，例如：@{btn-class} { .size(100px, 40px); }—— 这种需结合@btn-class的实际值判断 - 若 Mixin 仅用于颜色计算（如
.lighten-color(@c) { lighten(@c, 10%) }），且返回值只赋给另一个变量（@light-btn: .lighten-color(@primary);），那它本身仍算“被使用”，不可删
真正可靠的检测要靠构建流程介入
人工 grep 或试错成本高，复杂项目建议在构建环节加一层检查：
- 用
less-plugin-list-imports输出所有@import依赖树，确认变量/Mixin 文件是否被任何入口引用 - 在 Webpack 的
less-loader中配置javascriptEnabled: true后，可注入自定义函数（如isUsed("@primary-color")），但需改造 Less 编译逻辑，适合重度定制场景 - 最务实的做法：把所有工具类 Mixin 放进
_utils.less，所有变量集中到_variables.less，并约定“只允许从这两个文件@import”；删文件前先git grep "_utils"看引用数
变量和 Mixin 的“未使用”本质是作用域和调用链问题，不是语法错误。越想自动检测，越要接受它依赖项目结构约束——没有银弹，只有对 import 路径和命名规范的持续维护。
