less mixin默认参数不生效的主因是编译器严格按位置赋值，传入undefined或空字符串即视为已提供参数，导致默认值被跳过；此外还受嵌套调用覆盖、版本差异及变量声明顺序影响。
Less mixin 默认参数不生效的常见原因
根本问题往往不是语法写错，而是 Less 编译器对参数绑定的解析规则与直觉不符。当调用 mixin 时未显式传参，编译器不会“跳过”后续参数去匹配默认值，而是严格按位置顺序尝试赋值 —— 一旦某个位置传了 undefined 或空值，该参数就视为已提供，不再回退到默认值。
mixin 调用时传了 undefined 或空字符串
这是最隐蔽的坑：JavaScript 环境中动态生成 Less 字符串时，若变量为 undefined 或空字符串，拼接后仍会作为“实际参数”传入，导致默认值被忽略。
- 错误示例：
.btn(@color: #007bff, @size: 14px) { font-size: @size; color: @color; }，调用时写成.btn(#dc3545, "")→@size被设为空字符串，而非默认的14px - 正确做法：确保调用时不传递任何占位值，直接写
.btn(#dc3545)；或改用命名参数（Less 4.0+）：.btn(@color: #dc3545, @size: 16px) - 兼容旧版 Less：用守卫（
when）手动判断空值并 fallback，例如.btn(@color, @size) when (isstring(@size)) and (@size = "") { .btn(@color, 14px); }
嵌套 mixin 中默认参数被外层覆盖
当一个 mixin A 调用另一个 mixin B，且两者都有同名参数时，A 的参数值会直接透传给 B —— 即使 B 定义了默认值，只要 A 显式传了值（哪怕是 undefined），B 的默认值就不会触发。
- 典型场景：封装 UI 组件库时，基础 mixin
.icon(@size: 24px)被上层.user-avatar(@icon-size)调用，而@icon-size本身未设默认值 - 结果：
.user-avatar()调用时，@icon-size为undefined，传给.icon()后覆盖其24px默认值 - 解法：在上层 mixin 中显式设默认值，或用
default()函数（Less 4.2+）检查是否应使用默认值
Less 版本差异导致行为不一致
Less 3.x 与 4.x 对默认参数的解析逻辑有实质性变化。3.x 中部分情况下会“宽松匹配”，4.x 则更严格遵循参数位置和类型校验。
- 关键区别：Less 4.0+ 引入命名参数调用（
.mixin(@color: red, @size: 12px); .mixin(@size: 16px);），但 3.x 不支持，强行使用会报错或静默失败 - 验证方式：在命令行运行
lessc --version，确认版本；若用 Webpack，检查less-loader所依赖的 Less 版本 - 降级兼容方案：避免混合使用位置参数和命名参数；所有可选参数统一放在参数列表末尾，并确保调用时不传空值
真正容易被忽略的是参数求值时机 —— Less 在编译期解析默认值，但若默认值依赖于外部变量（如 @base-font-size），而该变量在 mixin 定义时尚未声明，就会回退到字面量或报错。务必把依赖的变量定义放在 mixin 之前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
