Less模式匹配是编译期按第一个参数字面量静态分发的函数重载机制,非运行时if判断;需显式定义所有分支(如.triangle(top)、.triangle(bottom)、.triangle(@\_, @w, @c)),参数顺序数量须严格一致,首参必须为字面量,不支持变量或when守卫。

Less模式匹配不是if语句,是函数重载式选择
Less的匹配模式(Pattern Matching)本质是“按参数值分发调用”,类似函数重载,不是运行时条件判断。它不生成@if那样的分支逻辑,而是在编译期根据传入的第一个参数字面量,静态匹配对应定义的.mixin名+参数结构。写成.triangle(top)却没定义.triangle(top)这个签名,就会静默跳过,而不是报错或 fallback 到兜底。
- 必须显式写出所有要支持的分支,例如
.triangle(top)、.triangle(bottom)、.triangle(@_, @w, @c)——其中@_是特殊通配符,表示“其他情况都走这里” - 参数顺序和数量必须严格一致:定义
.triangle(@dir, @w: 5px),调用.triangle("top", 8px)才匹配;若只传.triangle("top"),则依赖@w的默认值,否则会报Variable @w is undefined - 第一个参数必须是字面量(字符串/数字/关键字),不能是变量:
@d: "top"; .triangle(@d);不会匹配.triangle("top"),因为编译器无法在编译期求值
匹配模式里写CSS,别写逻辑
匹配块内部只能写声明语句,不能嵌套when、不能调用其他 mixin(除非明确知道它不依赖当前上下文)、不能做运算。它就是一个“样式模板槽位”。比如想让top和bottom共用一套border-style但不同border-color顺序,就老老实实分开写两段,别试图在同一个块里用if混写。
- 错误示范:
.triangle(@dir) when (@dir = "top") { border-color: ... }——when守卫不适用于匹配模式,这是两种机制 - 正确做法:定义两个独立规则
.triangle(top, @w, @c)和.triangle(bottom, @w, @c),各自填满 border 相关属性 - 兜底规则
.triangle(@_, @w, @c)里不要写!important或覆盖性样式,它只是收口,不是降级策略
参数类型模糊时,用@arguments兜底更安全
当需要支持任意数量/类型的参数(比如统一处理各种 border 写法),@arguments比强行拆解更可靠。它原样保留调用时传入的所有内容,避免因参数个数不对导致编译失败。
- 例如封装
.border():定义为.border(@...) { border: @arguments; },调用.border(1px solid #333)或.border(2px dashed red)都能直接透传 - 注意
@arguments是空格连接的字符串,不能直接用于数学运算或颜色函数,如需解析,得配合extract()或自定义解析 mixin - 别把
@arguments和默认参数混用:.border(@w: 1px, @...) { ... }语法非法,Less 不支持混合参数模式
调试匹配失败,先看编译输出里有没有对应 CSS
匹配失败最典型的症状是:调用了 mixin,但最终 CSS 里完全没生成那部分样式——不是报错,是“无声消失”。因为 Less 编译器发现没有匹配项,就直接跳过,连警告都不给。
立即学习“前端免费学习笔记(深入)”;
- 检查点优先级:① 调用写法是否带括号(
.triangle("top")✅,.triangle "top"❌);② 字符串引号是否英文双引号("top"✅,“top”❌);③ 参数个数是否与某一分支完全一致 - 临时加一句
content: "matched-top";到.triangle(top)块里,编译后搜 CSS 是否出现这行,能快速定位是否命中 - 避免在嵌套选择器里直接调用匹配 mixin:
.card { .triangle("top"); }会把样式注入到.card作用域下,但若本意是生成独立工具类,则应提一层定义
"top"改成"up"),所有调用点都得同步改,且 IDE 几乎不提供重命名支持——它不像 JavaScript 函数那样有符号引用。


















