无括号的Mixin会输出空规则，因为Less将.mixin-name（无括号）视为普通CSS类选择器而非可复用样式块，只要其出现在顶层作用域，编译时即生成.mixin-name { }空规则；正确写法须同时满足三点：定义以点开头并带括号（如.clearfix()）、不在顶层直接调用、仅在其他规则或Mixin内部调用。
为什么无括号的Mixin会输出空规则
Less 把 .mixin-name（不带括号）当作普通 CSS 类选择器处理，只要它出现在顶层作用域，编译时就会生成一条空规则，比如 .mixin-name { }。这不是 bug，是语法解析逻辑：Less 无法区分你写的是“想定义一个工具函数”还是“真要一个叫 .mixin-name 的类”。
常见错误现象包括：
-
_mixins.less里写了.clearfix { &::after { ... } }，结果最终 CSS 里多出一行.clearfix { } - 用
@import (reference)引入文件，仍出现空规则——因为(reference)只抑制顶层样式输出，但不改变对.name这种写法的解析行为 - Vue/React 组件中 scoped 样式下，这个空类可能意外被
class="clearfix"匹配到，造成干扰
正确写法：点前缀 + 括号 + 不在顶层调用
核心三要素缺一不可：
- 定义时加点且带括号：.clearfix()，不是 .clearfix 或 clearfix()
- 不在任何选择器或 mixin 外部直接调用它；例如不能在文件最外层写 .clearfix();
- 只在其他规则或 mixin 内部调用：.btn { .clearfix(); } 或 .card() { .shadow(); }
容易踩的坑：
- 写成
.size(@w, @h) { ... }（正确），但调用时漏括号：.size→ Less 当作选择器，输出.size { } - 在嵌套里误写
&.disabled { .clearfix; }（漏括号）→ 同样触发空规则 - 使用匿名空间模拟封装，如
#utils { .hide() { display: none; } }→#utils本身会被编译成真实选择器，污染输出
如何验证私有Mixin是否真正“隐身”
别依赖 IDE 高亮或编译日志，直接检查最终 CSS 文件：
- 搜索 .your-mixin-name { }（注意后面有空花括号）
- 如果没找到，再确认它是否被正常展开进其他规则里（比如 .btn { display: flex; } 中是否包含你预期的样式）
- 若发现空规则残留，回查两点：@import 链中是否有文件以无括号形式引用了它；该 mixin 是否被某个顶层 .xxx(); 调用过
真正轻量的做法是：所有工具 mixin 集中放在 _mixins.less，全部用 .xxx() 形式定义，并确保该文件只被 @import (reference) 引入，且从不在根作用域调用。这点一旦松动，空规则就立刻冒出来。
