less不支持函数式重载，而是通过guard条件+多同名mixin模拟；编译器按序匹配首个满足条件的分支，无guard则后定义覆盖前定义，需确保guard互斥且穷尽所有输入类型。
Less 本身不支持函数式编程意义上的“重载”——没有根据参数类型或数量自动匹配不同定义的能力。所谓“重载”，实际是靠 guard（守卫条件）+ 多个同名但带不同条件的 .mixin() 实现的模拟行为，本质是编译时分支选择。
为什么直接写多个同名 mixin 不报错，但只生效一个？
Less 允许定义多个同名 mixin，前提是它们有互斥的 when 条件；否则后定义的会覆盖前一个（静默覆盖，无警告）。编译器按顺序匹配第一个满足条件的版本，其余跳过。
- 错误写法：
.size(@val) { width: @val; }和.size(@val) { height: @val; }—— 无 guard，后者完全覆盖前者 - 正确写法：
.size(@val) when (isnumber(@val)) { width: @val; }与.size(@val) when (isstring(@val)) { width: ~"@{val}"; } - 注意：
isnumber()和isstring()是 Less 内置类型判断函数，必须小写、带括号
用 guard 区分单位、字符串、关键字等输入类型
常见需求是让同一个 mixin 名称接受 px、rem、auto 或 100% 等不同形式的值，并生成对应逻辑。关键不是“识别单位”，而是判断输入是否为数字、字符串，再结合 unit() 或 extract() 提取信息。
-
.max-width(@val) when (isnumber(@val)) { max-width: @val * 1px; }→ 输入480得max-width: 480px -
.max-width(@val) when (isstring(@val)) and (str-index(@val, "%") > 0) { max-width: @val; }→ 输入"100%"直接透出 -
.max-width(@val) when (iskeyword(@val)) { max-width: @val; }→ 输入none或max-content也合法
避免 guard 冲突和漏匹配的硬伤
Guard 条件必须穷尽所有可能输入类型，否则未覆盖的调用会导致 “undefined mixin” 错误——这不是运行时报错，而是在编译阶段找不到匹配项。
- 漏掉
isdimension()：传入12rem会被判为isstring()而非isnumber()，若没写对应分支就失败 - 字符串判断要加
and组合：仅isstring(@val)会匹配所有字符串，包括"red"这种无效值，应补and (str-index(@val, "px") > 0)等约束 - 默认兜底分支推荐写成：
.size(@val) when (default()) { width: @val; }，它在所有其他 guard 不满足时触发
参数数量差异不能靠重载，得用 @arguments 或 map
Less 不允许仅靠参数个数区分 mixin（如 .pad(8px) vs .pad(8px, 16px)），必须显式用 @arguments 拆解，或改用 map 参数。
- 不推荐：
.pad(@a) { padding: @a; }和.pad(@a, @b) { padding: @a @b; }—— 后者不会被识别为重载，调用.pad(8px, 16px)会报错 - 可行方案：
.pad(@vals...) { .pad-impl(@vals); }，再定义.pad-impl(@a) { padding: @a; }和.pad-impl(@a, @b) { padding: @a @b; } - 更健壮做法：用 map，如
.pad({ top: 8px, right: 16px })，配合map-get()提取，避免位置依赖
真正难的不是写出多个 guard 分支，而是确保每个分支的条件互斥、覆盖完整、且生成的 CSS 语义一致——稍有疏忽，就会在某个组件里突然发现 padding 变成了 width，而编译器连 warning 都不给。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
