Less Mixins 通过位置参数接收多个值，支持默认值但不支持命名传参或跳过参数；可用重载方式实现部分配置，需注意单位校验、颜色处理及展开顺序。
Less Mixins 怎么接收多个参数
Less 的 mixin 支持多参数，但默认是“位置匹配”，不是命名传参。传参顺序必须和定义时一致，否则样式会错乱。
常见错误：把 .btn(@color, @size) 调用成 .btn(@size: 14px, @color: red) —— Less 不认这种写法，会报 Expected ')' got ':' 错误。
- 参数之间用逗号分隔，不支持默认值与可选参数混用（除非显式设默认值）
- 支持带默认值的参数，比如
.shadow(@x: 0, @y: 2px, @blur: 4px, @color: rgba(0,0,0,0.2)) - 如果想跳过中间某个参数，只能传
default或具体值占位，不能留空
如何让 Mixin 支持「部分配置 + 自动回退」
靠默认参数 + 参数解构式调用不现实，Less 没有解构语法。真正灵活的方式是：把配置项收拢成一个 map（即对象字面量），再用 each() 或 isdefined() 判断字段是否存在。
但更轻量、更常用的做法是——用多个同名 mixin 实现“重载”：
立即学习“前端免费学习笔记（深入）”；
.flex-center() {
display: flex;
justify-content: center;
align-items: center;
}
.flex-center(@direction) {
.flex-center();
flex-direction: @direction;
}
.flex-center(@direction, @wrap) {
.flex-center(@direction);
flex-wrap: @wrap;
}
这样调用 .flex-center(row, wrap) 就能逐层叠加，避免重复写基础样式。
传参时遇到单位或颜色计算出错怎么办
Less 在 mixin 内部对参数不做类型预判，@size 传入 "12"（字符串）和 12px（带单位数值）行为完全不同：前者参与加法会报错 Operation on an invalid type。
- 统一在 mixin 定义里加类型守卫，比如用
isunit(@size, px)或isnumber(@size)做校验 - 颜色参数建议用
contrast-color()或lighten()等函数包装后再用，别直接拼字符串 - 慎用
@arguments—— 它会原样透传所有参数，单位混杂时极易引发计算异常
为什么嵌套 mixin 调用后生成的 CSS 顺序不对
Less 编译是自上而下展开的，mixin 展开位置决定 CSS 输出顺序。如果你在 .card 里先调 .border() 再调 .shadow()，最终 CSS 中 border 一定在 box-shadow 上方 —— 这本身没错，但容易被误认为“覆盖失效”。
真正的问题常出在：你期望 .btn-primary 继承 .btn 的所有样式，又想单独覆盖其中某几条，结果发现 background 出现在 padding 后面，导致开发者工具里看起来像没生效。
- 用
&:extend(.btn all)替代 mixin 调用，可复用并保持声明顺序可控 - 若坚持用 mixin，把“基础样式”放在最外层 mixin 底部，确保它最后展开（Less 展开是插入式，不是覆盖式）
- 编译后检查生成的 CSS，别只盯 Less 源码顺序 —— 那只是逻辑顺序，不是输出顺序
参数再多，只要没搞清 Less 是“文本替换+表达式求值”而非“运行时函数调用”，就容易在单位、颜色、顺序上反复踩坑。
