Less不支持模式匹配，只能用参数化混合宏配合when条件语句模拟多状态；更推荐BEM命名+状态类名+CSS层叠，由HTML控制状态组合，兼顾可维护性与运行时灵活性。
Less 本身不支持 Pattern Matching（模式匹配），这是函数式语言（如 Rust、Elixir）或现代 CSS-in-JS 库（如 styled-components 的 asChild 或 Tailwind 的变体逻辑）的特性。直接在 Less 中写 match($state) 或类似语法会报错——编译器根本不认识。
Less 中模拟多状态按钮的常规做法：用参数化混合宏（.btn()）
Less 支持带参数的 .mixin，可作为“状态分发中心”。常见状态（default、hover、disabled、loading）通过变量传入，再用 when 条件语句分支：
.btn(@state: default) when (@state = default) {
background: #007bff;
color: white;
}
.btn(@state: hover) when (@state = hover) {
background: #0056b3;
}
.btn(@state: disabled) when (@state = disabled) {
background: #6c757d;
cursor: not-allowed;
}
.btn(@state: loading) when (@state = loading) {
position: relative;
&::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s linear infinite;
}
}调用时：.btn(default);、.btn(hover); —— 本质是预编译时静态展开，不是运行时匹配。
为什么不能用 JavaScript 式的 switch 或 match？
Less 是编译时 CSS 预处理器，所有逻辑必须在生成 CSS 前确定。以下写法非法：
// ❌ 错误：Less 不支持变量值运行时判断
@state: hover;
.match(@state) {
@state = hover { background: #0056b3; }
@state = disabled { opacity: 0.5; }
}-
@state是 Less 变量，不是 JS 变量，无法在编译期做动态值匹配 -
match不是 Less 关键字，解析器直接报ParseError: expected ")" - 即使借助
if()函数，它只接受布尔表达式，不支持多分支枚举匹配
真正可行的替代方案：BEM + 状态类名 + CSS 层叠
更健壮、可维护的方式是放弃“在 Less 里模拟匹配”，转而用语义化类名驱动样式：
.btn { /* 基础样式 */ }
.btn--primary { background: #007bff; }
.btn--secondary { background: #6c757d; }
.btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn.is-loading { pointer-events: none; }
.btn.is-hovered:hover { background: #0056b3; } /* 注意：hover 需配合 :hover 伪类 */
HTML 中组合使用：<button class="btn btn--primary is-loading">。这样：
- 状态互斥/叠加由 HTML 控制，清晰直观
- 无需 Less 复杂条件逻辑，避免编译膨胀
- 支持运行时 JS 切换（
el.classList.toggle('is-disabled')） - 调试时直接看 DOM 类名，比查 Less 混合调用链快得多
复杂点在于：状态组合（如 is-disabled is-loading）需提前定义层叠优先级，否则 CSS 规则可能被覆盖——这恰恰是 Pattern Matching 想规避却无法在 Less 中实现的部分。
