Less中无真正模式匹配,仅通过when守卫条件模拟分支逻辑;必须显式写出各类型判断及default()兜底,否则编译报错;参数个数差异需用@args...或map处理,不可重载。

Less 里没有真正的 Pattern Matching(模式匹配),所谓“重载”只是用 when 条件 + 多个同名 mixin 模拟出来的分支逻辑;编译器按顺序找第一个满足条件的,不满足就报 undefined mixin 错误。
Less 中的 “Pattern Matching” 实际是 guard 分支匹配
你不能写 match(@state) 或 case "hover"——Less 编译器根本不识别这些语法。所有“模式”都得靠 when 守卫条件显式写出:
-
.btn(@state) when (@state = default)匹配字面量default -
.btn(@state) when (iskeyword(@state))匹配none、auto这类关键字 -
.btn(@state) when (isstring(@state)) and (str-index(@state, "loading") > 0)才能安全捕获含 loading 的字符串,避免把"red"也当状态
漏掉任意一种输入类型(比如传了 12rem 却没写 isdimension() 分支),就会在编译时报错,而不是静默忽略。
参数数量差异不能靠“重载”,必须用 @arguments 或 map
Less 不允许仅靠参数个数区分 mixin:.pad(8px) 和 .pad(8px, 16px) 写两个同名无 guard 的定义,后者会直接覆盖前者。
立即学习“前端免费学习笔记(深入)”;
- 想支持变参,得统一收口:
.pad(@args...) { ... },再用extract(@args, 1)拆解 - 或改用 map:
.pad({ padding: 8px, margin: 0 });,定义时用@rest: @arguments[0]; @padding: @rest[padding]; - 别试图用
.pad(@a) { ... } .pad(@a, @b) { ... }——这在 Less 里无效,也不报错,只生效最后一个
guard 冲突和默认兜底必须显式写 when (default())
多个 when 条件如果互斥性没做好,比如都用了 isstring(@val),编译器会取第一个匹配项,后面分支永远进不去。
- 推荐结构:先处理明确类型(
isnumber、iskeyword),再处理带特征的字符串(str-index(@val, "%")),最后用when (default())收尾 -
when (default())是唯一能兜住所有未被前面条件捕获的输入的机制,不是可选项 - 别依赖“写在最后就自动兜底”——没
when (default()),哪怕它是最后一个,也会触发undefined mixin
真正容易被忽略的是:Less 的“模式匹配”全程发生在编译时,没有任何运行时判断能力。HTML 里加个 class="btn--loading",不会触发任何 mixin 分支——所有样式都在生成 CSS 那一刻就静态展开了。


















