Less 的模式匹配实为 guard 条件编译，非字符串匹配；仅支持编译期可判定值的逻辑判断，不支持运行时字符串解析或正则匹配，复杂映射需借助 PostCSS 或构建脚本实现。
Less 中的模式匹配靠 guard 条件实现，不是正则或通配符
Less 本身不支持类似 Sass 的 @mixin 参数模式匹配（如 text-$size 动态生成类），也没有运行时字符串解析能力。所谓“模式匹配”，实际是利用 .class when (condition) 语法对传入参数做逻辑判断，再分支输出不同样式——本质是条件编译，不是字符串匹配。
常见误用是试图写 .bg-*(...) { ... } 或用变量拼接类名，这在 Less 编译期无法求值，会直接报错 Undeclared variable 或生成无效 CSS。
- 只接受布尔、数字、颜色、关键字等编译期可判定的值，不接受运行时字符串解析
- guard 条件中不能调用 JavaScript 函数（如
string.match()） - 所有分支必须显式覆盖，否则未命中 guard 时该 mixin 不生效，容易漏样式
用 guard + 参数类型/值判断生成差异化工具类
典型场景：按尺寸缩放文字、按语义设置背景色、按断点控制显示。核心是把“模式”转为可比较的参数值，再用 when 分支处理。
例如定义响应式文字大小工具类：
立即学习“前端免费学习笔记（深入）”；
.text-size(@size) when (@size = xs) {
font-size: 12px;
}
.text-size(@size) when (@size = sm) {
font-size: 14px;
}
.text-size(@size) when (@size = lg) {
font-size: 18px;
}
.text-size(@size) when (@size = xl) {
font-size: 24px;
}
调用时写 .text-size(xs)，编译后生成对应类；若传入 xxl 且无对应 guard，则整个 mixin 被忽略——这点极易被忽略，导致样式丢失。
- 推荐用
when not (@size = xs), not (@size = sm), ...补默认分支，避免静默失败 - 数值型参数建议统一单位（如全用
rem），避免12px和0.75rem混用导致比较失效 - 字符串参数区分大小写：
xs≠XS，需提前约定规范
组合多个 guard 实现多维判断（比如 color + tone）
单个参数不够表达复杂模式时，可叠加 guard 判断多个参数。例如同时控制背景色和明暗变体：
.bg(@color, @tone) when (@color = primary) and (@tone = light) {
background-color: #e0f7fa;
}
.bg(@color, @tone) when (@color = primary) and (@tone = dark) {
background-color: #006064;
}
.bg(@color, @tone) when (@color = danger) and (@tone = light) {
background-color: #ffebee;
}
这种写法能清晰分离语义维度，但要注意：Less 不支持嵌套 guard 或链式 fallback，每个组合都得单独声明。参数顺序、命名必须严格一致，否则调用 .bg(primary, light) 与 .bg(light, primary) 完全不同。
- 避免用
@tone: light设默认值再判islight(@tone)，因为islight是 Less 内置函数，返回布尔，但 guard 中只能用于简单判断，不能参与运算 - 大量组合易导致 mixin 膨胀，建议超过 6 种组合时改用 map 结构预定义（
@colors: { primary: #007bff; ... };），再配合循环生成 - 编译后 CSS 类名不可见，调试时需依赖 source map 或编译产物检查是否命中预期分支
真正需要“字符串模式匹配”时，必须放弃 Less 原生方案
如果业务真有 .m-1 → margin: 0.25rem、.p-t-2 → padding-top: 0.5rem 这类基于类名前缀+数字的自动映射，Less 无法完成。它没有能力从类名字符串中提取 t 和 2 并做逻辑映射。
可行路径只有两条：
- 用 PostCSS 插件（如
postcss-utility-classes）在 CSS 层解析类名并注入规则 - 用构建脚本（如 Node.js + Less API）预处理，读取配置生成对应 Less 文件再编译
强行在 Less 里用 @name: replace(@class, '-', ''); 等函数尝试解析，结果往往是编译错误或静态字符串替换，得不到真实数值映射。这类需求本质越过了 CSS 预处理器的能力边界。
