Less守卫必须写在带参mixin定义或嵌套&语法糖中,字符串与keyword类型需严格匹配,多分支须用default()兜底,类型检测函数依赖编译期静态分析。

Guard 必须写在 mixin 里,否则直接失效
Less 的 when 守卫不是 CSS 规则的条件开关,它只在编译期起作用,且语法位置极其严格。写成 .btn when (@size = "large") { padding: 16px; } 会报错——Less 不允许“裸守卫”。你只能把它放在两个地方:.btn(@size) when (@size = "large") { ... }(带参 mixin 定义),或 .btn { & when (@size = "large") { ... } }(嵌套 + & 语法糖)。漏掉括号、漏掉 &、或者把 when 塞进属性值里(如 color: when(@dark) #000;),都会让整段规则被忽略,连警告都没有。
字符串和 keyword 类型不一致,比较前必须确认传入形式
调用 .theme(dark) 和 .theme("dark") 是完全不同的行为:dark 是 keyword,"dark" 是 string。而 when (@mode = "dark") 只匹配字符串,when (@mode = dark) 才匹配 keyword。实际项目中,用户常从配置文件或 JS 注入参数,但 Less 编译时根本不知道 JS 存在,所以必须提前约定:所有主题名统一用字符串传入,或统一用 keyword,并在 mixin 内部用 isstring() 或 iskeyword() 显式判断。别指望 isstring("dark") 和 isstring(dark) 都返回 true——后者永远是 false。
多分支必须显式兜底,default() 不是可选项
Guard 分支按顺序匹配,遇到第一个为真就终止,其余跳过;如果全部不匹配,结果不是 fallback,而是——什么也不输出。例如:
.card(@type) when (@type = "featured") { border: 2px solid @primary; }
.card(@type) when (@type = "compact") { padding: 8px; }
.card("basic");
这段代码编译后,.card.basic 根本不会生成任何样式规则。解决方式只有两种:
立即学习“前端免费学习笔记(深入)”;
- 加一个无守卫的默认版本:
.card(@type) { opacity: 0.9; } - 用
default()显式兜底:.card(@type) when (default()) { opacity: 0.9; }
default() 不参与比较,只在前面所有守卫都失败时触发,且不能带参数。它不是语法糖,是 Less 提供的唯一“else”语义。
类型检测函数(如 iscolor())对输入极其敏感
Less 的类型判断不是运行时 typeof,而是编译期静态分析,且非常字面量。常见陷阱包括:
-
iscolor("red")→ false(字符串不是 color 类型);iscolor(red)或iscolor(#f00)→ true -
ispixel(12px)→ true;ispixel(12)→ false;isnumber(12px)→ false - 不能在
when里做单位转换:when (ispixel(unit(@val, px)))是非法语法
真正稳健的做法,是让参数契约清晰:要求传入 @border-width 必须是带单位的 length(如 2px),再用 ispixel(@border-width) 判断;而不是试图把各种格式都塞进一个参数里再做兼容。
default(),少一个引号,少一次 @import (reference),编译结果就可能静默缺失。


















