var()在html style属性中完全不被解析，浏览器在html解析阶段即静默丢弃整条声明；必须通过js读取getcomputedstyle获取变量值后手动赋值到element.style。
var() 在 style 属性里根本不会被解析——这不是“有时失效”，而是浏览器明确不支持，所有主流引擎（Chrome 120+、Firefox 115+、Safari 17+）都静默丢弃整条声明。
为什么 style="color: var(--primary)" 完全没反应
开发者工具的 Styles 面板里压根不显示这条规则，Computed 里对应属性还是初始值或继承值。这不是拼写错误、没加 :root 或路径问题导致的；是浏览器在 HTML 解析阶段就跳过了 var() 函数处理，只接受静态值。
-
style属性只认标准 CSS 属性名（如color、margin），--primary这种自定义属性名属于非法 token，整条声明直接被忽略 - 哪怕写成
style="--primary: #007bff; color: var(--primary)"，前半句无效，后半句因变量未定义而返回unset - Chrome 62–64 曾实验性支持，但早已移除；当前没有浏览器保留该能力
哪些场景下你以为它“生效”了？
常见错觉来源：
- 你实际看到的是外部 CSS 文件里同名规则生效了（比如
.btn { color: var(--primary); }），误以为是行内样式起作用 - JS 动态设置了
element.style.color = '#007bff'，但你没注意到这步赋值，归因到var() - 某些构建工具（如 Vite 插件）在编译期把
var(--x)替换成了真实值，生成的是纯静态style="color: #007bff"，不是运行时解析
想用 JS 控制 CSS 变量，必须手动取值再赋值
唯一可靠路径是绕过 var()，用 JS 读取计算后的值，再写入 style：
const primary = getComputedStyle(document.documentElement)
.getPropertyValue('--primary')
.trim();
element.style.color = primary;
-
getPropertyValue()返回带前后空格的字符串，务必.trim() - 如果变量定义在非
:root作用域（比如.theme-dark { --bg: #111; }），要传入对应元素而非document.documentElement - 注意加载时序：确保 CSS 已加载完成、变量已定义，再执行这段 JS；否则可能读到空字符串或
unset
真正容易被忽略的点
CSS 变量的设计本意是“级联 + 动态响应”，不是为内联样式服务的。一旦你开始频繁往 style 里塞 var()，说明你正在对抗浏览器原生机制——这时候该想的是：是不是该用 class 切换主题，或者用 JS 管理状态并批量更新 style，而不是硬塞一个不被支持的语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
