css变量是运行时生效的自定义属性（以--开头），可被javascript实时修改并触发重绘；而预处理器变量（如sass的$color）仅在构建时编译为静态值，无法动态响应、不支持继承与calc()计算，也不能用于transition动画。
什么是CSS变量，它和预处理器变量有什么本质区别
CSS变量（--color-primary）是运行时生效的自定义属性，写在:root或任意选择器里，通过var(--color-primary)调用。它不是编译期替换，所以能被JavaScript实时修改并触发重绘。
预处理器变量（如Sass的$primary-color）在构建时就固化成具体值，生成的CSS里根本看不到变量名。这意味着你无法用JS切换主题，也无法响应系统偏好（比如prefers-color-scheme）。
关键区别在于：CSS变量支持继承、可被calc()计算、能用transition做颜色渐变（虽然仅限于部分属性），而预处理器变量做不到这些。
如何声明和覆盖全局主题变量
把基础变量统一挂到:root下，这是最常用也最安全的做法：
:root {
--color-bg: #ffffff;
--color-text: #333333;
--color-primary: #007bff;
}
要换肤，不是改:root，而是加一个新选择器覆盖它：
:root[data-theme="dark"] {
--color-bg: #1a1a1a;
--color-text: #e0e0e0;
--color-primary: #0d6efd;
}
然后用JS切换document.documentElement.dataset.theme = "dark"。注意：不要用class去控制，因为:root没有class伪类；也不要直接操作style属性，那样会丢失继承链。
常见错误：
- 在
body或html上声明变量，导致子元素拿不到 - 忘记给
var()设fallback值，比如var(--color-bg, #fff)，否则变量未定义时会回退到inherit，可能出白屏 - 把变量名写成
color-primary（缺双横线），浏览器直接忽略
如何让CSS变量响应系统深色模式
用媒体查询监听prefers-color-scheme，直接在:root里覆盖变量：
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #121212;
--color-text: #f5f5f5;
}
}
这个方案不需要JS，纯CSS生效，但有个限制：用户手动切换主题时，它不会自动退出——得靠JS主动移除data-theme或重置dataset。
更稳妥的做法是把系统偏好作为默认值，再允许用户覆盖：
:root {
--color-bg: #ffffff;
--color-text: #333333;
}
<p>@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-bg: #121212;
--color-text: #f5f5f5;
}
}</p>
这样用户点“切回亮色”时，加data-theme="light"就能强制覆盖系统设置。
为什么有些颜色过渡不生效，transition对var()无效
transition不能直接作用于CSS变量本身，它只作用于使用该变量的属性，比如background-color或color。所以必须显式写：
.button {
background-color: var(--color-primary);
transition: background-color 0.3s ease;
}
而不是：
/* ❌ 这样没用 */
:root {
transition: --color-primary 0.3s ease;
}
另外，不是所有颜色都能平滑过渡：如果两个主题里--color-primary分别是#007bff和hsl(200, 100%, 50%)，浏览器可能因色彩空间不同导致跳变。统一用hsl()或rgb()声明所有主题色，能提升过渡质量。
还有个隐藏坑：CSS变量值如果是unset或initial，var() fallback也不会触发，它会直接按CSS规范回退，可能造成不可预期的透明或继承色。
变量换肤真正难的不是声明，而是确保整套UI组件都通过var()接入、所有状态（hover/active/focus）都覆盖到位，以及处理SVG内联样式、Canvas绘图等脱离CSS变量链的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
