less变量默认值靠!default仅在编译期生效且需前置声明；正确做法是三层文件结构：vars-base.less（带!default的初始值）、vars-theme.less（无!default的显式赋值）、入口按序导入，组件中直接使用变量而非硬编码。
Less 里不能靠 @var: value !default 实现 CSS 属性的“运行时默认值”——它只在编译期起作用，且必须出现在所有可能赋值之前；真正可控的默认行为，靠的是文件分层 + 导入顺序 + 显式覆盖。
为什么 !default 总是不生效
常见错误是把带 !default 的变量写在主题文件里（比如 dark.less），但项目入口先 @import 'base.less'，而 base.less 里已经写了 @primary-color: #333;。这时 !default 完全被跳过——它只在变量**完全未定义**时才触发，不是“优先级较低的备选”。
另一个典型翻车点：@primary-color: lighten(@primary-color, 10%) !default;，右侧引用自身，直接报 Recursive variable definition 错误。
正确组织变量文件的三层结构
把“默认值”从语义陷阱里拉出来，用物理隔离代替逻辑判断：
-
vars-base.less：只放带!default的初始声明，如@primary-color: #1890ff !default;、@border-radius: 4px !default; -
vars-theme.less（或由构建脚本生成）：只写无!default的直接赋值，如@primary-color: #ff6b6b;，不声明新变量 - 项目入口
index.less严格按顺序@import：@import 'vars-base.less'; @import 'vars-theme.less'; @import 'components/button.less';
禁止在组件文件（如 button.less）里重复 @import 'vars-base.less'——变量已在顶层注入，重复导入会引发不可控覆盖。
如何让 Less 变量真正影响最终 CSS 输出
光有变量声明没用。Less 变量必须穿透到每一条样式规则中，否则换主题就是换空气：
- 所有组件样式中，必须显式使用
@primary-color，而不是硬编码#1890ff - 避免在嵌套块里改同名变量：
&__body { @bg-color: #2d2d2d; }会污染后续所有@bg-color引用 - 如果要用 CSS 自定义属性实现运行时切换（比如深色模式），就得另起一套：
:root { --primary-color: @primary-color; }，再在样式中用var(--primary-color)，和 Less 变量解耦
最容易被忽略的是：变量一旦在表达式中被引用（如 color: @primary-color;），编译器就在那一刻锁定它的当前值——后面再覆盖，对这条规则已无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
