Less变量无法运行时动态修改，因其编译后即消失；必须用@primary-color: var(--primary-color, #007bff)在Less中声明CSS变量引用，并通过document.documentElement.style.setProperty()配合localStorage持久化控制--primary-color。
Less变量不能“映射”为CSS变量，只能单向透传
你无法让 @primary-color 在运行时响应 document.documentElement.style.setProperty('--primary-color', 'red') —— 因为 @primary-color 在编译完成那一刻就消失了，最终 CSS 里只留下它展开后的值（比如 color: #1890ff）或一个硬编码的 var(--primary-color, #1890ff)。所谓“持久化映射”，本质是放弃用 Less 管理运行时值，转而用 CSS 变量承载动态性，Less 只负责生成安全的 var() 引用。
正确写法：在 Less 中用 var() 显式引用 CSS 变量
要在 Less 文件中安全使用浏览器运行时才确定的值，必须写成：
@primary-color: var(--primary-color, #007bff);
这个声明必须放在全局作用域（如 variables.less 顶部），且满足以下条件：
-
var()函数不能省略；写成@primary-color: --primary-color;或@primary-color: @{--primary-color};都会报错 - fallback 值（逗号后的
#007bff）必须显式指定；否则未定义时退化为inherit，可能造成文字透明 - 所有后续使用
@primary-color的地方（如color: @primary-color;）最终输出为color: var(--primary-color, #007bff);，不会固化值 - 不能嵌套在
.dark {}或@media块内，否则编译失败 ——@primary-color在块外不可见
为什么 --primary-color: @{primary-color}; 是错的
这种写法看似“把 Less 变量赋给 CSS 变量”，但实际效果是把 @primary-color 当前值（如 #1890ff）字符串插值进 CSS，结果是：
--primary-color: #1890ff;
它彻底丢失了动态性。JS 调用 document.documentElement.style.setProperty('--primary-color', 'red') 完全无效，因为该属性早已被 Less 编译器当作文本写死。
更严重的是，Less 解析器根本不允许以 -- 开头的自定义属性名出现在声明左侧，直接写 --primary-color: @primary-color; 会触发 ParseError: Syntax Error。
真正持久化的关键：JS 控制 + CSS 变量落地
所谓“持久化”，是指用户换肤后刷新页面仍保持主题色。这和 Less 无关，靠的是将选中的颜色存入 localStorage 并在页面加载时注入：
- 初始化时读取
localStorage.getItem('theme-color')，调用document.documentElement.style.setProperty('--primary-color', value) - 每次换肤后同步写入
localStorage - 确保
:root中已声明默认 fallback：:root { --primary-color: #007bff; } - Less 文件里所有颜色都基于
@primary-color: var(--primary-color, #007bff);衍生，不出现任何硬编码值
最容易被忽略的一点：你在 DevTools 的 Styles 面板里永远找不到 @primary-color —— 它只存在于编译过程。最终生效的只有 --primary-color 这个 CSS 变量，以及它在 :root 上的值。别在浏览器里找 Less 变量名，那不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
