Less为何无法读取CSS变量？详解预处理器与运行时变量差异

Less 无法读取或操作 CSS 变量，根本原因在于二者分属完全不同的世界：Less 变量是构建期静态替换的编译时概念，编译后即消失，生成的 CSS 中不留痕迹；而 CSS 变量（`var(--x)`）是浏览器运行时动态解析的级联属性，依赖 DOM 和样式计算。插值 `@{theme}` 仅支持字符串拼接，不能生成合法属性名或动态 `var()` 参数；JS 与 Less 之间不存在双向绑定，真正可控的主题切换必须绕过 Less，直接通过 `document.documentElement.style.setProperty()` 操作 CSS 变量，并在 Less 中用 `var(--x, fallback)` 显式回退——理解这一本质差异，才能避免踩坑、写出可维护的动态样式系统。

Less变量在编译期就消失了，根本碰不到CSS变量

Less不是运行时引擎，它只在构建阶段（Webpack、Vite 或命令行 lessc）把 @primary-color 这类变量替换成具体值，比如 #007bff，然后输出纯 CSS。生成的 CSS 文件里没有 @primary-color，也没有 var(--primary-color) ——除非你手动写进去。所以“Less 读取 CSS 变量”这个说法本身是错的：它不读，也不能读。

为什么 @{theme} 插值不能用于属性名或 var() 参数

Less 的变量插值 @{variable} 只能在选择器、url()、字符串值中生效，不能拼出 margin-@{side} 这种属性名，更不能动态生成 var(--@{name})。浏览器解析 CSS 时，var(--@{name}) 会被当成无效语法直接丢弃——因为 @{name} 在编译后还是字面量字符串，不是真实变量名。

• @name: primary-color; → color: var(--@{name}); 编译结果是 color: var(--primary-color);（看起来对，但只是字符串拼接）
• 但如果 @name 是计算出来的（比如通过函数返回），Less 4.0+ 也不支持运行时求值，插值失败或报错
• 真正安全的写法是显式写死： color: var(--primary-color, #007bff);

想让 JS 控制 Less 颜色？别绕弯，用 CSS 变量桥接

Less 变量和 JS 之间没有双向通道。硬要同步，唯一可靠路径是：Less 里用 var(--xxx) 回退，JS 用 document.documentElement.style.setProperty('--xxx', 'red') 修改。中间不经过 Less 编译器，也不依赖任何插件。

• 错误做法：@primary-color: ~`process.env.PRIMARY_COLOR`（需开启 javascriptEnabled，有安全风险且 Webpack 5+ 已限制）
• 正确做法：在 :root 定义 --primary-color: #007bff，Less 中写 @primary-color: var(--primary-color, #007bff)
• 注意 fallback 必须显式写全，否则未定义时可能变成 transparent 或继承值，导致文字消失

构建期导出 Less 变量给 JS 用，但别指望它能反向驱动样式

你可以用 less-plugin-js-vars 把 @primary-color 导出为 src/styles/less-variables.js，JS 里 import { primaryColor } from './styles/less-variables.js' 拿到值 —— 但这只是单向快照，JS 改了 primaryColor，不会影响已生成的 CSS。

• 导出文件必须被 JS 显式 import，不能靠 Tree-shaking 自动保留（加 /*#__PURE__*/ 不保险）
• 导出的是编译时刻的值，不是响应式引用；JS 切换主题必须配合 CSS 变量，不能只改 JS 变量
• 如果项目没用构建工具（比如纯 HTML + less.js），这种导出根本不可行 —— 浏览器里没有 Less 编译器来执行插件

最易被忽略的一点：CSS 变量的作用域是级联的，var(--x) 查找从当前元素向上直到 :root；而 Less 变量的作用域是文件级的，连 @import 都要按顺序处理。混用时，你以为在覆盖，其实只是两个世界各自运行。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~