Less中不能用--primary-color: @primary-color;赋值CSS变量，因解析器不识别--语法而报ParseError；正确静态写法是--primary-color: @{primary-color};，但会固化值失去JS动态修改能力。
直接在 Less 中写 --primary-color: @primary-color; 必然报错，这不是浏览器兼容问题，而是 Less 解析器根本无法识别 -- 开头的自定义属性语法。
Less 解析器不支持 CSS 变量声明语法
Less 的词法分析阶段会把 --primary-color 当作一个非法标识符（identifier）处理。它既不是合法变量名（不能以 -- 开头），也不在 CSS 属性白名单里，所以直接抛出 ParseError: Syntax Error 或 Unrecognised input。
- 错误写法：
--primary-color: @primary-color;→ 编译中断 - 错误写法：
@{--primary-color}→ 解析器尝试匹配变量@--primary-color，但该变量未定义，报NameError: variable @--primary-color is undefined - 正确写法（仅限静态赋值）：
--primary-color: @{primary-color};→ 字符串插值，输出硬编码值，如--primary-color: #007bff;
想让 CSS 变量运行时可变，就不能用 Less 变量赋值
如果你希望 JS 后续能通过 document.documentElement.style.setProperty('--primary-color', 'red') 动态修改，那 --primary-color 的值必须由 JS、媒体查询或根元素内联样式控制，不能被 Less 在构建期固化。
-
--primary-color: @{primary-color};是“快照式”输出，JS 修改无效 - 真正运行时透传的写法是：在全局作用域（如
variables.less顶部）写@primary-color: var(--primary-color, #007bff); - 后续所有
color: @primary-color;都会编译为color: var(--primary-color, #007bff);，浏览器实时读取 - 注意：
var(--primary-color)没 fallback 时，未定义会退化为inherit，可能造成意外透明
为什么 var(--x) 在某些 Less 版本里也报错？
旧版 Less（如 3.x）解析器会把 -- 当作减号运算符前缀，导致 var(--x) 被误解析为 var( - -x )，进而触发语法错误。这不是你写错了，是解析器能力边界。
- 安全写法（兼容所有版本）：
@primary-color: ~"var(--primary-color, #007bff)";—— 使用字符串转义避免解析 - 但注意：
~""是 Less 3 的遗留语法，Less 4+ 推荐用var(--primary-color, #007bff)并确保开启javascriptEnabled: true（Webpack/Vue CLI 中需显式配置） - Vue 单文件组件中
是独立编译上下文，variables.less不自动注入，必须显式@import或用style-resources-loader
最易忽略的一点：CSS 自定义属性和 Less 变量是两套完全正交的机制，混用时别试图让它们“互相赋值”。需要运行时响应，就只用 var()；需要构建期批量生成多主题，才用 Less 变量输出不同 --xxx 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
