Less变量在编译期被替换为具体值，不读取也不支持动态CSS变量；@{theme}插值不能用于属性名或var()参数；JS同步样式需通过CSS变量桥接，而非Less变量双向绑定。
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 编译器，也不依赖任何插件。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 错误做法：
@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 都要按顺序处理。混用时，你以为在覆盖，其实只是两个世界各自运行。
