Less 中无法检测变量是否定义，未声明变量会导致编译期立即报错；应通过变量覆盖顺序或 mixin 默认参数实现灵活配置。
Less 里根本不能“检测变量是否定义”
直接说结论：@variable 一旦未声明，Less 编译器会在解析阶段立刻报错 Variable @xxx is undefined，不会继续执行、也不会 fallback。你写不了 if(@color, ..., ...) 这种逻辑——@color 本身不存，表达式还没走到 if() 就崩了。所谓“检测”，在 Less 编译模型里是伪命题。
真正能落地的方案：用变量覆盖顺序代替检测
核心思路是消除“未定义”这个状态，而不是去判断它。靠的是 Less 的变量作用域和后声明覆盖前声明的规则：
- 在基础文件（如
defaults.less）里写：@primary-color: #007bff; - 用户项目中按顺序引入：
@import "defaults.less"; @import "user-variables.less"; -
user-variables.less可以安全重写：@primary-color: #28a745;—— 它会覆盖默认值 - 后续所有样式直接用
@primary-color，无需任何判断
这个模式稳定、零编译风险，且符合 Less 的设计哲学：编译期确定性。别碰 !default 做兜底——它只对首次声明生效，跨文件或多次 import 时行为难预测，容易失效。
需要条件分支？封装成 mixin + 默认参数
如果你的组件必须支持“有变量就用，没变量就走另一套样式”，唯一可行路径是把逻辑移到 mixin 层：
立即学习“前端免费学习笔记（深入）”；
.button-style(@color: #007bff) {
color: @color;
border: 1px solid desaturate(@color, 20%);
}
调用时：
- 有变量：
.button-style(@primary-color); - 无变量（或想强制覆盖）：
.button-style(#ff6b6b);
注意：if() 函数不能救场——它要求 @color 必须已定义，否则编译直接中断；when() 控制整块规则生成，但同样依赖变量存在。mixin 参数默认值才是唯一绕过“未定义即报错”的机制。
别踩这些坑
几个高频翻车点：
-
@import "theme-@{env}.less"——@{env}在@import路径里完全不展开，直接报错或静默忽略 -
if(@theme, red, blue)—— 若@theme未声明，报错，不是返回blue - 把
boolean(@x)当!!@x用 ——@x是裸变量时，boolean()不做容错，照样报错 - 在 CSS 属性名位置写
@{prop}: red却没给@prop赋字符串值 —— 必须是@prop: "color"; @{prop}: red;，否则语法错误
Less 的“条件”全是编译期静态求值，没有运行时、没有 undefined 概念、没有兜底通道。所有看似灵活的写法，背后都得靠提前约定、显式声明、作用域控制来兜住。写错一行变量声明，整个编译就停，这点比 JS 严格得多，也容易被忽略。
