Less 4.0 的 if() 和 when() 均在编译期求值,if() 用于单属性条件取值,when() 控制整条规则是否生成;if() 的 condition 必须是静态布尔表达式,不支持未定义变量或裸变量,需用 iscolor()、= 等确保类型安全与逻辑明确。

Less 4.0 的 if() 和 boolean() 不是 JavaScript 风格的运行时判断,它们在编译期求值,且仅支持静态表达式 —— 所有参数必须能在编译时确定真假,不能依赖 JS 变量、用户交互或 DOM 状态。
什么时候该用 if() 而不是 when?
if() 是函数,用于单个属性值的条件返回;when 是规则级条件,控制整块样式是否生成。两者不互斥,但用途完全不同。
- 要用
if():当你需要根据变量值动态决定某个属性的具体取值,比如color: if(@dark-mode, white, black) - 要用
when:当你想让一整套选择器(含嵌套、伪类、媒体查询)只在特定条件下存在,比如.btn when (@size == "lg") { padding: 1rem; } - 混用常见错误:在
if()里传入未定义变量(如if(@theme, red, blue)),若@theme根本没声明,Less 会报错Undeclared variable: @theme,不会默认为false
if() 的 condition 参数必须是布尔上下文可解析的表达式
Less 不接受任意“真值”,只认明确的布尔字面量、比较结果、逻辑运算结果或类型检查函数返回值。
- ✅ 正确写法:
if((2 > 1), red, blue)、if(iscolor(@c), @c, #333)、if(not(@debug), display: none, opacity: 0.8) - ❌ 错误写法:
if(@env == "prod", ..., ...)——@env是字符串,不是布尔值,需显式转:if(@env = "prod", ..., ...)(注意是单等号=,表示值相等比较) - ⚠️ 注意:
==在 Less 中要求单位和值都严格一致(500px == 500px✅,500px == 500❌),日常建议统一用= - 逻辑组合必须加括号:
if((@w > 400px) and (@h ,漏括号会导致语法错误
boolean() 不是类型转换函数,而是强制求值工具
boolean(expression) 的作用是把一个比较/检查表达式包装成布尔字面量,方便复用或传给 if()。它本身不改变行为,但能避免重复计算。
立即学习“前端免费学习笔记(深入)”;
- 典型场景:你有一组基于亮度的配色逻辑,
@bg-light: boolean(luma(@bg) > 50%)计算一次,后续多个if(@bg-light, ..., ...)就不用反复写luma(@bg) > 50% - ⚠️ 容易忽略:如果
@bg不是颜色(比如是字符串"#fff"或未定义),luma(@bg)会直接报错,boolean()不会捕获或兜底 - 别把它当
!!用:boolean(@some-var)无效 ——@some-var必须是能参与比较或类型检查的表达式,不能是裸变量 - 性能无关紧要:所有这些都在编译时完成,无运行时开销,但写错会导致编译失败,而不是静默降级
真正复杂的地方在于嵌套条件与类型安全:比如 if(isstring(@color) and not(iscolor(@color)), darken(@color, 10%), @color) 这类写法,表面看合理,但一旦 @color 是空字符串或数字,iscolor() 行为可能不符合直觉 —— 最稳妥的方式始终是先做类型检查,再分支处理,而不是指望 if() 自动容错。


















