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 函数那样有符号引用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
