less变量（@color）属编译期静态替换，css变量（--color）为运行时动态生效，二者分属不同层级；混用不报错但行为不可控，必须通过@{primary}插值手动桥接到:root声明中实现共存。
原生 CSS 变量（--color）和 Less 变量（@color）根本不在同一层——前者运行时生效，后者编译期替换。混用不报错，但行为完全不可控：Less 会把 --color 当普通字符串或非法标识符处理，甚至直接卡死编译。
Less 遇到 --xxx 直接报错或静默失效
Less 默认把双短横开头的标识符识别为“非法变量名”，尤其在旧版本（less@3.x）中：color: var(--primary); 可能触发 ParseError: expected ')' got '-' ；而新版虽能过编译，却不会解析 var() 内部，导致最终输出仍是 color: var(--primary);——这看似正常，但若你本意是让 Less 把 --primary 替换成 #007bff，那就彻底落空了。
- 别写
color: var(@primary);—— Less 不支持把变量注入var()函数，会原样输出color: var(#007bff);，浏览器直接忽略 - 也别在 Less 文件里定义
--primary: #007bff;——这不是 Less 语法，会被当成无效规则丢弃 - 若需动态主题切换，必须明确分层：Less 负责静态构建时生成的默认样式，
:root中的--xxx仅用于 JS 运行时控制
想让 Less 变量“透传”给 CSS 变量？必须手动桥接
Less 本身不生成 CSS 变量，也不能读取运行时变量。要实现“一套值，两处用”，得靠显式赋值桥接：
- 在
:root块中手动写：:root { --primary: @{primary}; }—— 注意必须用插值@{primary}，不能用@primary -
@{primary}必须是已定义且带单位/引号的合法值，比如@primary: "#007bff";或@primary: 16px;，否则插值后语法非法 - 该
:root块必须放在所有依赖它的 CSS 规则之前，否则var(--primary)查不到值 - 不要试图用 Less 函数生成
--xxx列表，比如.gen-css-vars() { ... }—— 没有意义，CSS 变量只能在声明块里定义
PostCSS 是唯一靠谱的混用方案
如果你真需要 Less 和 CSS 变量深度联动（比如用 Less 定义颜色，自动产出对应 --xxx 并注入 :root），纯 Less 做不到。必须引入 PostCSS 插件，例如 postcss-custom-properties 或 postcss-variables，并在 Webpack 配置中确保执行顺序：Less 编译 → PostCSS 处理。
- Less 输出含
@custom-property: #007bff;的中间 CSS，PostCSS 插件再把它转成--custom-property: #007bff; - 注意插件兼容性：
postcss-custom-properties支持var(--x)回退，但不处理 Less 变量；需配合postcss-less-vars类插件 - Webpack 中
less-loader和postcss-loader的顺序不能颠倒，否则 PostCSS 看不到 Less 编译后的结果 - 这种链路调试成本高，除非项目明确要求运行时换肤，否则建议放弃混用，统一用 Less 变量 + 构建时多主题打包
最易被忽略的一点：浏览器开发者工具里看到的 var(--x) 值，永远不是 Less 控制的——它只反映当前 :root 或父级作用域实际设置的值。Less 变量在 DevTools 里根本不可见，查问题时别在 Styles 面板里找 @x 的来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
