Less 官方语法不支持 if()、default() 等运行时逻辑函数,也不支持条件分支语句;其变量、混合、循环均在编译期展开,无运行时求值能力;可用带守卫的 mixin 实现类似 if 的条件分支。

Less 里根本没有 if 和 default 函数
直接说结论:Less 官方语法不支持 if()、default() 这类运行时逻辑函数,也不支持条件分支语句。你看到的所谓“Less if”基本是误传,或是混淆了 Sass 的特性。Less 的设计哲学是“CSS 预处理器”,不是“图灵完备语言”,它的变量、混合(.mixin)、循环(.loop())都只在编译期展开,没有运行时求值能力。
用 mixin + guard 实现类似 if 的条件分支
Less 支持带守卫(guard)的 mixin,这是最接近 if 的机制——它根据变量值是否匹配某条件,决定是否调用该 mixin 分支。注意:守卫只支持简单比较(=、!=、>、),不支持嵌套表达式或函数调用。
常见错误现象:if(@theme = 'dark') { ... } 会报错,因为 Less 不认这种写法;.mixin() when (@theme = 'dark') { ... } 才合法。
- 必须用
.mixin-name() when (condition)语法定义分支 - 多个分支需同名、不同守卫,Less 会按顺序匹配第一个为 true 的
- 守卫中不能写
is-light(@color)这类自定义判断,只能用内置比较和类型函数(如isnumber()、iscolor()) - 示例:实现主题色切换
.set-bg(@color) when (@color = dark) {
background: #1a1a1a;
}
.set-bg(@color) when (@color = light) {
background: #fff;
}
.set-bg(@color) when not (@color = dark) and not (@color = light) {
background: @color;
}
body { .set-bg(dark); }
用默认参数 + mixin 调用模拟 default 行为
Less 没有 default() 函数,但 mixin 参数支持默认值,且调用时可省略参数——这恰好能模拟“取默认值”的语义。关键在于:默认值本身可以是变量、计算结果,甚至另一个 mixin 的输出(只要不形成循环依赖)。
容易踩的坑:@var: default(@fallback, @primary); 这种写法不存在;正确做法是把“默认逻辑”封装进 mixin 的参数默认值里。
- 定义 mixin 时直接写
.btn(@bg: #007bff) { background: @bg; } - 调用
.btn();就自动用默认色;.btn(#dc3545);则覆盖默认 - 若需动态 fallback(比如“用 @theme-color,否则用 @base-color”),得靠 guard 分支或提前赋值:
@used-color: if(@theme-color, @theme-color, @base-color);——但注意:这里if()是假的,实际要用守卫 mixin 或变量预判
为什么别硬套 Sass 思维写 Less
Less 编译器不会执行 JS 式逻辑,所有“判断”本质都是静态模板匹配。你写的 when (@debug = true) 在编译时就被确定了,无法像 Sass 的 @if 那样结合函数返回值做复杂决策。性能上,守卫分支越多,编译速度越慢;兼容性上,旧版 Less(and/or 守卫都不支持。
真正需要运行时逻辑的场景(比如基于屏幕宽度动态生成断点、根据颜色亮度反推文字色),Less 力不从心——这时候该换工具,或者用 JS 运行时方案(如 CSS-in-JS),而不是强行用 Less 模拟。
最常被忽略的一点:Less 的变量是“作用域内最后一次赋值生效”,不是“声明时求值”。这意味着你以为的“默认 fallback”可能被后续同名变量覆盖,而你根本没意识到。










