90%的undefined mixin错误源于括号缺失或参数签名不匹配，而非拼写问题；less静默忽略定义或拒绝调用，需检查定义是否为class、参数数量/类型/guard条件是否一致，以及默认值是否置于参数末尾。
Less mixin 调用报 undefined mixin 怎么快速定位
90% 的 undefined mixin 错误不是拼写问题，而是定义和调用的括号、参数签名不一致。Less 不会提示“你少写了括号”，只会静默忽略定义或拒绝调用。
- 定义写成
.center { display: flex; }→ 不是 mixin，是普通 class，调用.center()必报错 - 调用写成
.size(12px, 16px)，但定义是.size(@w, @h, @unit: px)→ 参数数量不匹配，直接失败 - 定义用了 guard（如
.btn(@type) when (@type = primary)），但传入@type: 'secondary'→ 没有匹配的分支，也报 undefined
.mixin(@a, @b) 和 .mixin(@a) 能共存吗
能，而且这是 Less 原生支持的「匹配模式」，不是重载也不是覆盖——它靠参数个数和值精确匹配，编译时只展开命中的一组。
- 定义两个同名 mixin：
.shadow(@size) { box-shadow: 0 @size 0 rgba(0,0,0,.2); }和.shadow(@x, @y) { box-shadow: @x @y 0 rgba(0,0,0,.2); } - 调用
.shadow(4px)→ 展开第一个；调用.shadow(2px, 6px)→ 展开第二个 - 注意：参数类型也要对齐，
.shadow('4px')（字符串）不会匹配@size（单位数值），除非定义里显式接收字符串
传参时单位、字符串、颜色混用导致编译失败
Less 不做隐式类型转换。定义里声明 @size: 1rem，就只认带单位的数值；传 "16px" 或 #fff 都会中断编译，且错误信息极简（常只报“Parse error”）。
- 安全做法：在 mixin 定义中为每个参数设默认值并注明单位，例如
.font-scale(@base: 1rem, @ratio: 1.2) - 避免传字符串控制行为，改用 guard：
.text(@color) when (iscolor(@color)) { color: @color; }，否则.text("red")会原样输出color: "red";，CSS 无效 - 颜色函数如
lighten(@c, 10%)要求@c是合法颜色值，传变量前先用iscolor()判断，别依赖运行时容错
为什么加了默认值还是报参数缺失
因为 Less 默认值只对「尾部参数」生效。如果你定义 .border(@width, @style: solid, @color)，调用 .border(1px) 就会失败——@color 在最后却没传，而 @style 虽有默认值，但被卡在中间，无法跳过。
- 正确顺序：把有默认值的参数全放在末尾，例如
.border(@width, @color, @style: solid) - 想跳过中间参数？只能用 map：
.border({ width: 2px, color: #333 })，配合@rest解构，但需 Less 3.5+ 且增加阅读成本 - 更实际的解法：拆成多个语义化小 mixin，比如
.border-width(@w)+.border-color(@c)，比堆参数更可控
font-size: "16px"; 这种带引号的非法声明，浏览器直接丢弃整条规则，而编译器不报错。调试时得盯着生成的 CSS 看，而不是只信 Less 编译成功。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
