怎么在Less中通过模式匹配编写差异化CSS工具类？-css教程-PHP中文网

less 的模式匹配实为 guard 条件编译，非字符串匹配；仅支持编译期可判定值的逻辑判断，不支持运行时字符串解析或正则匹配，复杂映射需借助 postcss 或构建脚本实现。

怎么在less中通过模式匹配编写差异化css工具类？

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 被忽略——这点极易被忽略，导致样式丢失。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

推荐用 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 或编译产物检查是否命中预期分支