CSS变量通过:root声明--primary-color并用var(--primary-color)引用，可实现多组件颜色联动更新；需确保作用域正确、避免覆盖与拼写错误，且仅在JS修改或媒体查询时响应式生效。
怎么让多个组件的颜色自动跟着一个值变
靠 CSS 变量（--primary-color）配合 :root 声明，再在各组件里用 var(--primary-color) 引用。改一次变量，所有用到的地方实时响应，不用 JS 也能“绑定”。
关键不是“写变量”，而是变量作用域和更新时机：必须定义在能被所有目标选择器继承的位置（通常是 :root），且不能被更具体的选择器意外覆盖。
- 别在某个组件内部写
:host { --primary-color: blue; }—— 外部组件读不到 - 避免用
!important覆盖var()，它会切断变量链，导致后续无法动态更新 - 如果组件用 Shadow DOM，得在 shadow root 内手动 setProperty，
:root不穿透
CSS 变量真能“响应式更新”吗
能，但只在 JS 主动修改或媒体查询触发时才重算。它不是 Vue 的响应式数据，没有 getter/setter，也不会监听 DOM 变化。
典型场景：主题切换、夜间模式、用户偏好色调整。你调 document.documentElement.style.setProperty('--primary-color', '#ff6b6b')，所有 color: var(--primary-color) 立刻生效。
立即学习“前端免费学习笔记（深入）”；
- 不要指望 class 切换自动触发变量更新（除非你用 JS 监听并手动 setProperty）
- 动画中直接用
var(--color)会失效 —— CSS 动画不支持变量插值，得用@property（兼容性差）或预设多套变量 - IE 完全不支持，
var()在 Safari 9.1+、Chrome 49+、Firefox 31+ 才稳定
为什么有时候 var() 没生效，颜色还是初始值
最常见原因是变量未定义或拼写不一致，CSS 会静默 fallback 到声明里的第二个参数（如果有），否则用属性默认值。
比如 background-color: var(--bg-color, #fff);，如果 --bg-color 根本没声明，就显示白色；但若写成 var(--bg-colour)（拼错），又没 fallback，就会回退到 background-color 的初始值 transparent，可能看不见。
- 检查浏览器开发者工具的 Computed 面板，看该属性最终计算值是否为
var(--x)本身（说明未解析） - 确保变量名大小写完全一致：
--PrimaryColor和--primarycolor是两个变量 - 变量必须在使用前声明，CSS 是自上而下解析的，但
:root通常够用
和 CSS-in-JS 或预处理器变量比有啥区别
CSS 变量是运行时生效的，能被 JS 读写、能被媒体查询控制、能继承；而 Sass/Less 变量是编译期替换，输出后就固定了；CSS-in-JS 依赖 JS 执行环境，服务端渲染或禁用 JS 时可能出问题。
适合场景：需要用户交互控制的主题色、根据系统偏好（prefers-color-scheme）自动切色、同一份 CSS 适配多品牌皮肤。
- 别用 CSS 变量存复杂逻辑（比如
calc(var(--a) * 2 + var(--b))嵌套太深易出错） - 不要把大量样式属性都抽成变量（如
--padding-xs,--padding-sm…），维护成本陡增 - 变量名建议带语义前缀，比如
--theme-accent比--color-2更可靠
真正难的不是声明变量，而是设计一套能随业务演进、不互相污染、不导致 cascade 意外覆盖的变量命名与作用域策略。多数人卡在这一步，而不是语法不会写。
