Less变量安全引用CSS变量必须写成@primary-color: var(--primary-color, #007bff);，省略var()或误写为--primary-color会导致编译错误；该写法是运行时透传别名，需声明在全局作用域，fallback必须显式指定，且最终输出为原生var()函数。
Less变量怎么安全引用CSS变量
必须写成 @primary-color: var(--primary-color, #007bff);，不能省略 var()，也不能写成 @primary-color: --primary-color; 或 @primary-color: @{--primary-color};。Less 会把后者当成未定义变量报错，前者则被解析为非法标识符，最终输出空值或触发语法错误。
这行代码不是“定义颜色”，而是创建一个运行时透传别名：每次渲染时，浏览器都会重新读取 --primary-color 的当前值。所以它必须声明在全局作用域（如 variables.less 顶部），嵌套在 .dark {} 里会导致编译失败 —— @primary-color 在该块外不可见。
- fallback 必须显式写，
var(--primary-color)没有 fallback 时，未定义会退化为inherit，可能造成意外透明或继承父级颜色 - 浏览器开发者工具里查不到
@primary-color，只能看到最终计算出的 CSS 值，这不是“没生效”，是 Less 已把它编译为var(--primary-color, #007bff) - 所有用到该变量的地方（比如
background: @primary-color;）最终都输出原生var()，不固化值
为什么不能用Less变量给CSS变量赋值
写 --primary-color: @primary-color; 会直接报 ParseError: Syntax Error。Less 解析器不识别 -- 开头的自定义属性语法，也不允许在声明中混用预处理器变量和原生 CSS 变量。
唯一合法的写法是字符串插值：--primary-color: @{primary-color};。但注意：这只是把 @primary-color 当前的静态值（比如 #007bff）硬编码进 CSS，后续 JS 调用 document.documentElement.style.setProperty('--primary-color', 'red') 完全无效。
立即学习“前端免费学习笔记（深入）”；
- 想保留运行时可变性，就不要让 Less 参与赋值，CSS 变量必须由 JS 或媒体查询直接控制
- 如果需要构建期生成多套主题 CSS（比如 light/dark 分别打包），才适合用 Less 变量批量输出不同
--xxx值 - Webpack/Vite 中若用
less-loader配置modifyVars，改完要重启 dev server —— 它不支持 HMR 级别的变量热替换
如何在Less里原样输出var(--x)而不被解析
直接写 color: var(--primary-color); 在某些 Less 版本里会出错，因为解析器把 -- 当作非法前缀尝试匹配变量名，结果找不到 @primary-color 就报错或静默丢弃。
正确做法是用转义：color: ~"var(--primary-color)";。这个 ~"" 告诉 Less：“别解析，原样吐出去”。它比裸写 var() 更稳妥，尤其在旧版 Less 或复杂嵌套中。
- 不能在
~""里做插值，~"var(--@{theme}-color)"是无效的 ——~""内部不支持@{} - 如果要动态拼接变量名，得先用普通 Less 变量存好字符串，再插值进非转义的
var()，比如：@theme-var: ~'--dark-primary'; color: var(@theme-var, #333); -
~"var(--x)"和var(--x)最终输出一样，但前者绕过了解析阶段所有歧义，适合 CI/CD 环境下追求稳定性的项目
:root声明和import顺序是硬约束
CSS 变量必须在 :root 下定义才能全局生效，写在 html 或 body 里会有继承断层、Shadow DOM 不可见、SSR 首屏样式错乱等问题。而 Less 文件的 @import 顺序决定了变量是否被覆写 —— 先 @import "variables.less";，再 @import "~antd/dist/antd.less";，否则 @primary-color 在 antd 内部已锁定，你的覆写完全无效。
- 第三方库（如 Ant Design、Bootstrap）的变量文件必须放在你自定义变量之后导入，但要在其主样式文件之前
-
:export伪类只对 JS 导出变量有用，对 CSS 变量无任何作用；想让 JS 读到值，又让样式用上变量，得两头写：:root { --primary-color: @primary-color; }+:export { primaryColor: @primary-color; } - Vue 单文件组件中
<style lang="less">无法访问同组件内<style>定义的 CSS 变量，它们属于不同作用域，必须统一挂到:root
var(--x) 必须真实存在于最终 CSS 中，且 :root 声明必须在任何使用它的规则之前加载，否则 fallback 会悄悄接管，而你可能在 DevTools 里都看不出异样。 
