无参mixin适合封装固定样式如清除浮动，命名须明确意图；带参mixin需设默认值、防参数耦合、慎用颜色计算；调用时覆盖顺序决定最终样式，嵌套中勿漏&符号。
直接用无参 .clearfix() 或带参 .border-radius(@radius) 就能避免重复写同一套声明，但混用不当反而让样式更难追踪——关键在命名是否暴露意图、参数是否留出覆盖空间、调用时是否隐式覆盖了其他规则。
无参 Mixin 适合封装固定不变的样式组合
比如清除浮动、重置默认边距、设置字体抗锯齿等不随上下文变化的逻辑。这类 Mixin 不需要传值，定义即固化，复用最安全。
- 常见错误是把本该带参的逻辑硬写成无参，比如
.btn-primary颜色写死在 Mixin 里，结果所有按钮都被锁死成同一种色值 - 命名必须体现作用，别用
.reset()这种模糊名，改用.reset-margin-padding()或.text-antialiased() - 无参 Mixin 内部仍可调用函数，比如
.clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; } }，但不能依赖外部变量（除非已全局定义）
带参 Mixin 要预留默认值和覆盖通道
参数不是越多越好，而是要覆盖真实使用场景中的可变点。比如圆角、阴影偏移、过渡属性这些常变项，必须能被单独控制，否则一改全崩。
- 必须设默认值：
.shadow(@x: 0, @y: 2px, @blur: 4px, @color: rgba(0,0,0,.15))，否则.shadow()空参调用会编译失败 - 避免参数耦合：不要把
@size和@weight合并在一个参数里传字符串，应拆成两个独立参数，方便局部覆盖 - 颜色类参数慎用
lighten()等函数直接计算，容易因基础色变更导致衍生色失控；更稳妥的是定义语义化变量如@btn-hover-bg，再由 Mixin 引用
Mixin 调用时的覆盖顺序很关键
Less 编译时按源码顺序展开 Mixin，后写的声明会覆盖先写的同名属性。这不是 CSS 层叠，而是编译期文本拼接——一旦顺序错，视觉就错。
- 比如
.button { .border-radius(4px); .border-radius(8px); }最终只保留border-radius: 8px - 多个 Mixin 共用同一属性时（如都设
transition），必须确认它们是否真的互斥；否则应合并进一个 Mixin 统一管理 - 嵌套中调用 Mixin 要小心
&的绑定：写&:hover { .transition(opacity, .2s); }是对的，但写成:hover { .transition(...) }（漏&）就会生成全局:hover规则
真正难的不是写出来，而是当一个 .card 同时调用了 .shadow-sm、.rounded-lg、.bg-white 三个 Mixin，而其中某个内部又悄悄重写了 box-shadow ——这时你得顺着编译后 CSS 往回查，而不是靠眼睛扫 Less 源码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
