Less不支持真正多参数重载，仅能通过guard条件+单名多定义模拟；编译器按序匹配首个满足条件的分支，无guard则后定义覆盖前定义，需确保guard互斥且穷尽所有输入类型。
Less混合怎么支持多参数重载？
Less本身不支持函数式语言那种“同名不同参”的重载机制，.btn() 不能像 TypeScript 那样定义多个签名。所谓“重载”，其实是靠参数默认值 + 类型判断（iscolor()、isnumber()）+ 模式匹配（@arguments 或 guard）来模拟的。
真正可行的做法是：用一个混合接收灵活参数，内部用 when 分支处理不同调用意图。比如传颜色就当主色，传两个颜色就当渐变，传字符串就当预设类型。
常见错误是直接写多个同名 .btn()，Less 会静默覆盖，只保留最后一个定义，调试时按钮样式莫名失效往往就是这个原因。
如何用guard实现按钮类型+尺寸+状态的组合分支？
用 when 守卫可以清晰分离语义场景，比嵌套 if 更易读、更易维护。关键点在于把「可枚举的选项」转成变量名，再用守卫匹配：
立即学习“前端免费学习笔记（深入）”；
.btn(@type: default) when (@type = primary) { background: #007bff; }.btn(@size: md) when (@size = sm) { padding: 4px 8px; font-size: 12px; }.btn(@state: normal) when (@state = hover) and (@type = primary) { background: darken(#007bff, 10%); }
注意：guard 必须写在混合定义末尾，且每个分支要独立定义（不能写成 .btn(...) when (...) { ... } when (...) { ... }）。另外，@state 这类非样式参数建议统一放在最后，避免和颜色/尺寸等数值参数混淆。
怎样让混合自动适配深色模式下的按钮反色？
纯靠 Less 无法监听系统主题变化，但可以预留 CSS 变量钩子，让混合输出兼容 prefers-color-scheme 的规则：
.btn(@bg: #007bff) {
background: @bg;
color: contrast(@bg);
@media (prefers-color-scheme: dark) {
background: lighten(@bg, 20%);
color: contrast(lighten(@bg, 20%));
}
}
这里 contrast() 是 Less 内置函数，能根据亮度自动选黑或白文字色。但要注意：它只作用于编译时已知的颜色值；如果传入的是 CSS 变量（如 @bg: var(--primary)），Less 无法计算对比度，会报错或返回透明色。
所以实际项目中，建议深色模式逻辑交给 CSS 自己处理，Less 混合只负责生成基础 class 和变量占位，例如：--btn-bg、--btn-bg-hover，再由外部 :root 或媒体查询注入具体值。
为什么用.btn(@color, @border: false)比.btn(@color; @border)更安全？
分号语法（.btn(@a; @b)）是 Less 的「可变参数」写法，意味着 @b 必须显式传入，哪怕传 false 或 none；而默认值写法（@border: false）允许完全省略该参数，调用时写 .btn(#007bff) 就行。
容易踩的坑：
- 混用两种风格，比如定义用分号、调用用默认值写法，Less 会报
Expected ')'错误 -
@border: false中的false是布尔字面量，不是字符串，别写成"false"，否则isboolean()判断会失败 - 涉及单位时（如
@padding: 8px），不要默认给0—— 应该用0px或0em，避免和数字0类型冲突
复杂点在于：混合一旦开始承担“生成伪类”“插入动画”“响应式断点”这些职责，参数数量和 guard 分支就会快速膨胀。这时候不如拆成 .btn-base()、.btn-variant()、.btn-state() 三个独立混合，用组合代替重载。
