var() 函数需先在作用域内定义变量（如 :root 或组件容器），使用时写为 color: var(--primary-color, #000)，括号与逗号不可缺；动态更新宜批量操作，避免高频触发重绘；IE 不支持，旧 Safari 有继承 bug，需兼容处理。
var() 函数怎么写才不会失效
直接写 color: var(--primary-color) 是最常见写法，但变量没定义或作用域不对时，它会退回到浏览器默认值（比如黑色），而不是报错——这让你很难发现漏写了 :root 或父级未声明。
- 必须在使用前定义，且作用域要覆盖到目标元素；
:root是最稳妥的全局位置 - 不要在
@keyframes或@media内部直接定义变量（部分浏览器不支持） - 回退值不是可选参数，而是
var(--name, #000)的第二项，漏写括号或逗号会直接让整条声明失效
组件级色调切换：如何避免污染全局颜色变量
一个按钮组件想用自己的一套 --bg、--text，又不想影响其他组件？靠继承链 + 局部作用域就行，别一股脑全塞 :root。
- 给组件容器加 class（比如
.card-theme-dark），然后在该 class 下定义变量：.card-theme-dark { --text: #fff; --bg: #333; } - 子元素直接用
var(--text)，自动取最近的有效声明，无需 JS 干预 - 如果组件嵌套深，注意层级覆盖：父级变量会被子级同名变量覆盖，这是特性，不是 bug
动态更新 CSS 变量时，哪些操作会触发重绘
用 JS 改 document.documentElement.style.setProperty('--color', 'red') 看似简单，但频繁调用会卡顿——因为每次都会触发样式计算和重排。
- 批量改多个变量，用一次
style.cssText或对象赋值比多次setProperty更轻量 - 只在用户交互后更新（如点击主题按钮），别在
scroll或mousemove里实时改 - 动画场景慎用：CSS 变量本身不支持过渡，得靠
transition: background-color 0.2s这类具体属性来承接
兼容性陷阱：IE 不支持 var()，但 Safari 15.4 之前有继承 bug
IE 完全不识别 var()，会忽略整条声明；而旧版 Safari 在 flex/grid 子项里读不到父级设置的变量，表面正常，实际是 fallback 值在撑场子。
- 用 PostCSS 插件（如
postcss-css-variables）做编译时降级，但注意它无法处理 JS 动态更新的部分 - Safari 15.4+ 才修复 flex item 继承问题，测试时务必在真机或对应模拟器跑
- 不要把关键视觉逻辑全押在变量上——比如
border: 1px solid var(--border)，万一变量失效，至少 fallback 值得是可用色
变量不是魔法，它只是把颜色值从写死的位置挪到了声明位置。真正难的是控制作用域边界、管理 fallback 安全性和避开渲染管线里的隐式成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
