无括号的.mixin被当作普通css类输出，仅带括号的.mixin()才是可调用混合器；参数须设默认值且不可省略括号；嵌套中漏&会导致样式逃逸至全局。
不带括号的.mixin 被当成普通 CSS 类选择器
Less 解析器遇到 .mixin（无括号）时，不认为它是可复用的样式块，而是直接当作一个空的 CSS 规则来处理。哪怕你从没调用它，只要声明了，就会输出 .mixin { } 到最终 CSS 中。
常见错误现象：
- 全局 mixins 文件里写了
.clearfix，又用@import (reference)引入，结果.clearfix { }仍出现在编译后的 CSS 里 -
.btn-primary { .btn-base; }编译后出现两段：一段空的.btn-base { }，一段展开的.btn-primary { ... }
带括号的.mixin() 才是真正的可调用混合器
只有写成 .mixin()，Less 才识别为 mixin 定义；调用时也必须用 .mixin();，否则编译失败或静默忽略。
关键细节：
- 无参 mixin 也不能省略括号：
.center() { display: flex; }✅，.center { ... }❌ - 中文括号、全角空格、
.mixin ( )这类写法全部非法，只认紧贴名称的英文小括号 - 定义和调用括号必须都存在，漏一个就报
undefined mixin，不是警告，是编译中断
参数缺失或未设默认值会导致编译失败
带参 mixin 如 .btn(@color, @padding)，若调用时只传一个值 .btn(#dc3545)，Less 会报错 Variable @padding is undefined。
正确做法：
- 所有参数必须设默认值：
.btn(@color: #007bff, @padding: 8px 16px) - 调用时可省略尾部参数：
.btn(#28a745);→ 只覆盖@color，其余用默认值 - 不支持关键字传参，顺序错一位、类型不匹配（如传字符串代替长度值），都会出问题
嵌套中漏掉 & 会让样式“逃逸”到全局
在选择器内部调用 mixin，比如 .card { .flex-center(); }，如果 .flex-center() 内部没用 & 绑定上下文，它的子规则（如 &:hover）会变成独立顶层规则，污染其他组件。
典型陷阱：
- 错误写法：
.flex-center() { display: flex; justify-content: center; &:hover { opacity: .8; } }→:hover会生成独立规则:hover { ... } - 正确写法：
&:hover { opacity: .8; }必须写成&:hover { ... }，确保编译后是.card:hover { ... } - 这种漏
&的问题不会报错，但样式错位、响应式断点失效，调试起来特别隐蔽
& 是控制作用域边界的隐性锚点——这两处看似微小，却是绝大多数 mixin 编译异常和样式污染的根源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
