如何让CSS中Less变量与CSS自定义属性共存

Less变量与CSS变量分属构建期和运行时，需手动桥接：@primary-color: var(--primary-color, #007bff) 作fallback，:root显式声明CSS变量，JS仅修改--primary-color实现主题切换。

Less变量和CSS变量不是同一层东西，别混着用

Less变量（@primary-color）只在构建时起作用，编译后就变成死值（比如 color: #007bff），浏览器里根本看不到它；而CSS自定义属性（--primary-color）是运行时可读写的，靠 var(--primary-color) 活着。两者共存不是“自动同步”，而是要你手动桥接。

在variables.less里用@primary-color: var(--primary-color, #007bff);兜底

这是最常用也最安全的共存写法：Less变量本身不直接参与样式渲染，而是作为 fallback 传给 var() 函数。

1. @primary-color 仍可用于 Less 内部计算，比如 lighten(@primary-color, 10%) —— 只要它最终被 var() 包裹，就能生效
2. 如果 JS 还没设置 --primary-color，浏览器会退回到 #007bff，避免样式崩掉
3. 千万别写成 @primary-color: #007bff; color: var(--primary-color); —— 这样 @primary-color 和 --primary-color 完全脱钩，改一个另一个不会动

:root 里必须显式声明 --primary-color，否则 var() 查不到

Less 编译器不会自动把 @primary-color 吐成 CSS 变量，你得自己写：

:root {--primary-color: #007bff;--font-size-base: 14px;}

1. 这个 :root 块要放在所有样式之前（或至少确保它被加载），否则后续 var(--primary-color) 会取到 undefined
2. 如果你用 Webpack + less-loader，可以配合 :export 提取 JS 可读的配置，但那对 CSS 渲染没用 —— :export 和 :root 是两件事，不能互相替代
3. Vite 用户注意：:export 默认不支持，得换插件或改用 JS 导出，但 :root 声明仍需手写

主题切换时，只动 --primary-color，别碰 @primary-color

运行时 JS 切主题，只该调用：

document.documentElement.style.setProperty('--primary-color', '#ff6b6b');

1. 不要尝试动态重写 Less 变量 —— 浏览器里没有 Less 编译器，@primary-color 在 CSS 文件里早就是固定字符串了
2. 组件内所有颜色引用都得统一走 color: var(--primary-color);，而不是 color: @primary-color;
3. 如果用了 lighten(@primary-color, 10%) 这类函数，得确认它作用在 var(--primary-color) 上是否合法 —— 实际上不合法，lighten() 接收的是颜色值，不是字符串，所以这类计算必须留在 Less 层做，再把结果导出为另一个 CSS 变量

真正难的不是怎么写，是怎么让团队所有人记住：Less变量只管开发期组织和计算，CSS变量才管运行时响应。漏掉其中一环，主题切换就只剩一半功能。