less模式匹配是编译期分支控制机制，用于替代硬编码状态类（如.btn--size-small），不替代媒体查询或js运行时逻辑；需用括号包裹条件、支持=等基础运算符，多条件须嵌套或拆分，且必须覆盖全部输入、参数为字面量、同名混合参数个数一致。
Less模式匹配是什么，它能替代哪些CSS条件分支
Less的模式匹配（.mixin(@arg) when (condition)）不是语法糖，而是编译期的分支控制机制。它能替代那些靠多个独立class手动切换、或靠JS动态增删class来实现的“伪条件逻辑”，比如：.btn--size-small / .btn--size-large、.card--theme-dark / .card--theme-light 这类硬编码状态类。它不替代媒体查询（@media），也不替代运行时JS判断，只解决“编译前就可确定的样式变体”问题。
写法要点：when条件必须用括号包裹，且只支持基础比较
常见错误是漏掉括号或用错运算符：.size(@s) when @s = small 会报错，必须写成 .size(@s) when (@s = small)。Less只支持 =、!=、、<code>>、=、<code>>=，不支持 && 或 ||，多条件需嵌套或拆成多个规则：
.btn(@type) when (@type = primary) { background: @primary-color; }.btn(@type) when (@type = secondary) { background: @secondary-color; }-
.btn(@type) when not (@type = primary) and not (@type = secondary) { background: @default-color; }—— 注意：and必须小写，且不能省略not的括号
避免模式匹配被忽略的三个关键点
模式匹配失效往往不是语法错，而是编译行为导致的“静默跳过”：
- 所有匹配分支必须覆盖全部可能输入，否则未命中的参数会导致该调用完全不输出CSS —— 比如只写了
when (@s = small)和when (@s = large)，但调用.size(medium)就啥也不生成 - 变量值必须是字面量（
small、12px），不能是另一个变量（@size-var）或表达式（small + "-alt"），否则匹配失败 - 同一混合名下，所有
when分支必须参数个数一致；混用无参和单参版本会冲突，编译器只认最后一个定义
模式匹配 + 默认参数，才是安全的组合
纯 when 容易漏兜底，加默认参数就能强制 fallback：
.btn-style(@type: default) when (@type = primary) {
background: @primary-color;
}
.btn-style(@type: default) when (@type = secondary) {
background: @secondary-color;
}
.btn-style(@type: default) when (@type = default) {
background: @default-color;
}
这样即使调用 .btn-style()（不传参）或 .btn-style(invalid)，也会走第三条规则。注意：默认值必须和某个 when 条件严格一致，否则仍会不生效。
真正难处理的是需要组合多个维度（size + theme + state）的情况——这时别硬塞进一个混合，拆成 .btn-size()、.btn-theme()、.btn-state() 分别匹配，再组合调用更清晰，也避免条件爆炸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
