mixin 不是“写一次，到处粘贴”，而是“定义逻辑，按需注入样式”；用错场景、漏括号、参数不设默认值，八成会导致编译失败或样式错乱。
直接说结论：Mixin 不是“写一次，到处粘贴”，而是“定义逻辑，按需注入样式”；用错场景、漏括号、参数不设默认值，八成会导致编译失败或样式错乱。
Mixin 定义必须带括号，否则编译器当普通 class 忽略
Less 对语法极敏感：.flex-center（无括号）会被识别为一个类选择器规则，不是可复用的 mixin；只有 .flex-center() 才能被调用。漏掉括号是 undefined mixin 错误的头号原因。
- 无参 mixin 也得写空括号：
.clearfix(){ ... } - 调用时同样不能省：
.clearfix();，写成.clearfix;会生成一个空 class 名，而不是插入样式 - 定义和调用括号缺一不可，且不能混用中文引号或全角符号
带参 mixin 必须设默认值，且参数顺序严格匹配
参数不是“可选”，而是“未传即报错”。.size(@w, @h) 若调用时只传一个值 .size(12px)，Less 会提示 Variable @h is undefined。
- 正确写法：
.size(@w: 12px, @h: 12px) { width: @w; height: @h; } - 调用时省略尾部参数合法：
.size(8px);→width: 8px; height: 12px; - 跳过中间参数？Less 不支持关键字传参，只能靠 map：
.btn({ color: red, padding: 10px });，前提是 mixin 定义里用了@arguments或解构 - 单位要一致：定义用
@size: 6px，就别传"6px"字符串，除非 mixin 内部做了类型判断
方向/状态类参数必须加英文引号，否则守卫失效
Less 的 when 守卫把未加引号的 top 当作变量名，而非字符串字面量。写成 & when (@direction = top)，实际是在比变量 @top 是否等于 @direction，永远不成立。
- 三角形 mixin 正确写法：
& when (@direction = "top") - 调用必须对应：
.triangle("top", 8px, #333); - 常见错误：用中文引号
“top”、大小写不一致"Top"、漏引号.triangle(top) -
when不支持运算：when (@size > 10px)会崩溃；需拆成多个重载：.size(@s) when (isnumber(@s))+.size(@s) when (isstring(@s))
嵌套中调用 mixin 必须带 &，否则生成全局规则
在 .card { } 块里写 :hover { .transition(); }，编译结果是 :hover { transition: ... } —— 全局生效，不是 .card:hover。这是样式“写了却不起效”的最隐蔽原因。
- 正确写法：
&:hover { .transition(opacity, .2s); } -
&表示当前选择器链的完整快照：&__title→.card__title，&.is-active→.card.is-active - 多个 mixin 共用同一属性（如都设
transition），后调用的会覆盖前一个，不是层叠，是文本拼接 - 高频调用复杂 mixin（如
.shadow-sm()被用 20 次），会生成 20 份重复 CSS —— 拆成.shadow()、.rounded()等小单元更可控
真正麻烦的不是写不出来，而是编译后的 CSS 里没了 mixin 痕迹，你得靠 source map 或手动注释才能定位哪段样式来自哪个 mixin —— 这点上线前才容易暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
