less不支持变量存在性运行时判断，仅能通过!default静态赋值（需置于入口文件顶部早于@import）或iscolor()等类型检查函数配合if()实现安全兜底，无法响应主题切换等运行时变化。
Less里没有“变量是否存在”的运行时判断
Less不提供 typeof、defined() 或类似 JavaScript 的检查机制。所谓“判断变量是否存在”，实际是靠编译器对变量定义顺序和 !default 的静态解析规则来模拟的——它不是条件分支，而是“仅当未定义时才生效”的一次性赋值机会。
!default 必须出现在第一次定义位置，且不能被后续无修饰赋值覆盖
常见错误是把带 !default 的变量写在 @import 之后，或在主题文件里先 @import 'vars.less' 再重写变量。这时 !default 根本不会触发，因为变量早已被前面的定义占位了。
- ✅ 正确姿势：所有
!default变量必须放在整个编译入口（如index.less）最顶部，且早于任何@import - ✅ 覆盖动作只能发生在
@import链靠后位置（比如themes/dark.less），且用无修饰的直接赋值：@primary-color: #1890ff; - ❌ 错误写法：
@primary-color: #007bff !default;放在components/button.less里——它会被其他更早引入的同名变量冲掉，或根本没机会参与全局变量初始化
用 iscolor()、isnumber() 等类型检查函数做安全兜底
如果你需要根据变量类型决定样式逻辑（比如颜色有效才设 background），不能依赖“是否存在”，而要依赖“是否符合预期类型”。Less 提供了 iscolor()、isnumber()、isstring() 等函数，配合 if() 使用：
button {
background-color: if(iscolor(@btn-bg), @btn-bg, #007bff);
font-size: if(isnumber(@font-size-base), @font-size-base, 14px);
}
注意：if() 的 condition 参数不能是裸变量（如 if(@btn-bg, ...)），否则编译报错 Undeclared variable: @btn-bg；必须用类型检查或比较表达式包裹。
真正需要“按需加载默认值”的场景，优先考虑 CSS 自定义属性
Less 的 !default 是纯编译期行为，无法响应主题切换、用户偏好等运行时变化。如果你的“默认值”需要被 JS 动态修改、或在不同媒体查询中差异化生效，!default 就不合适了。这时候应该用双层变量策略：
- Less 层只负责生成基础 token 和 fallback 值（如
@primary-color-fallback: #007bff;） - CSS 变量层承接运行时控制：
--primary-color: var(--primary-color-from-js, @primary-color-fallback); - 最终样式用
color: var(--primary-color);，既保留 Less 编译优势，又支持运行时注入
最容易被忽略的一点：很多人试图用 !default 实现“可插拔主题”，结果发现深色模式开关无效——问题不在写法，而在误把编译期机制当运行时工具用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
