less变量无法在运行时修改，因其在构建阶段已被编译为固定值；必须用@primary-color: var(--primary-color, #007bff)桥接css变量，并通过document.documentelement.style.setproperty()动态更新。
不能直接混用，必须明确区分编译期和运行时语义——Less变量在构建时就被替换成固定值，CSS变量（var(--x)）则由浏览器在运行时解析。混写会导致编译失败、值被错误替换，或样式静默失效。
为什么color: var(--primary)在Less里会报错或输出空值
Less解析器看到--会尝试匹配变量语法，但--不是合法的Less变量前缀，所以要么报ParseError，要么静默忽略、输出var()空括号。更糟的是，如果你恰好定义了@primary: #007bff;，Less可能把它插值进去，生成var(#007bff)——这不是合法CSS，浏览器直接丢弃整条规则。
- 必须用
~"var(--primary)"强制原样输出，绕过Less变量解析 - 不能写
var(--@{name})——~""内部不支持插值，拼接需在外部完成再转义 - 如果想fallback，得手写
~"var(--primary, #007bff)"，Less不会帮你展开
如何让@primary-color真正桥接到var(--primary-color)
关键不是“复用变量名”，而是让Less变量本身成为CSS变量的引用别名。正确写法是把var()表达式赋给Less变量，而不是反过来。
- 在
variables.less顶部（不在任何嵌套块内）声明：@primary-color: var(--primary-color, #007bff); - 后续所有地方用
@primary-color，编译后自动变成var(--primary-color, #007bff) - 禁止写
@primary-color: --primary-color;——这会输出非法CSS，浏览器不识别 - 这个写法才能支持JS运行时切换主题：改
:root里的--primary-color，所有用@primary-color的地方都会重计算
变量文件导入顺序和命名冲突怎么避坑
Less没有模块作用域，所有@import进来的变量扁平合并，后定义者覆盖前定义者，且不报错。调试时根本看不出哪份生效。
- 所有公共变量必须统一收口到
variables.less，其他文件只@import不重定义 -
@import语句必须放在每个.less文件最顶部，否则使用变量时报NameError - 禁用裸名：
@color、@size这种必然撞车，改用@color-text-primary、@spacing-lg - 用
lessc --lint检查重复定义（Less 4.0+），它能发现同一项目中多处声明同名变量
mixins封装var()比裸写~"var(--x)"更可靠
散落在各处的~"var(--x)"难以维护：漏fallback、改名时搜不全、无法统一加RTL逻辑或降级策略。mixin强制结构化，一眼看出用途和兜底值。
- 定义统一mixin：
.use-var(@prop, @fallback) { color: var(@prop, @fallback); } - 调用：
.button { .use-var(--primary-color, #007bff); } - 后续加兼容逻辑（如对IE fallback到
rgb()）只需改mixin体，不碰业务代码 - 注意：mixin里仍要避免在
var()内做Less运算，比如lighten(@prop, 10%)无效——@prop只是字符串，不是颜色值
最容易被忽略的一点：Less编译器不管--xxx是否真在CSS里定义了。你拼出--dark-primary但没在:root里声明，编译照样通过，浏览器静默忽略——这问题只能靠人工核对或运行时调试工具发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
