css变量必须定义在:root中且以--开头，本质是字符串替换的自定义属性，支持所有css值类型；使用var()时需注意大小写、作用域、定义顺序及回退值限制。
怎么在 :root 里定义真正生效的全局 CSS 变量
变量必须写在 :root 伪类里，且用 -- 开头，否则浏览器直接忽略。它本质是自定义属性，不是传统编程里的“变量”，不会自动计算或更新值，只做字符串替换。
-
:root等价于html元素，但优先级更高，能确保全局可访问 - 不能写成
body { --color-primary: blue; }—— 这样只在body及其后代生效，不算“全局” - 值里不能有未转义的空格或括号（比如
--size: 1rem 2rem;会报错，得用函数包裹或拆成多个变量） - 支持所有 CSS 值类型：颜色、尺寸、渐变、甚至
url()和calc()
为什么 var(--color) 有时返回空值或回退失败
常见原因是作用域丢失或拼写不一致——CSS 变量区分大小写，且没有运行时错误提示，出错了就静默用回退值或继承值。
- 检查是否漏写了
--前缀：var(color-primary)❌，必须是var(--color-primary)✅ - 确认使用位置在定义之后（CSS 是从上到下解析的，但
:root通常放最前，所以一般没问题） - 回退值不能是另一个
var()调用（除非嵌套写法支持，如var(--color, var(--fallback))），多数浏览器不支持多层 fallback - 如果变量定义在媒体查询内，而读取在外部，那该断点外就不可用
如何用 CSS 变量实现主题切换而不重绘整个页面
核心是把主题相关变量集中定义在 :root，再通过 class 切换来批量覆盖，避免逐个改元素样式。
- 先定义基础变量：
:root { --bg: #fff; --text: #333; } - 再写主题 class：
.theme-dark { --bg: #1a1a1a; --text: #eee; } - HTML 上切 class：
，所有var(--bg)就自动取新值 - 注意：不要在 JS 里反复 setProperty 修改几十个变量，性能差；优先用 class 控制整组变量
- 动画不支持直接过渡 CSS 变量（
transition: --bg无效），得靠@property（仅 Chrome/Edge 支持）或间接过渡background-color等原生属性
哪些地方不能用 CSS 变量，容易掉坑
CSS 变量不是万能的，尤其在需要真实计算或动态逻辑的地方，强行硬套反而增加维护成本。
- 不能用于
@media的条件判断（@media (prefers-color-scheme: var(--mode))❌） - 不能在
@keyframes里定义变量然后被动画引用（动画帧内无法读取当前变量值） - 不能替代预处理器变量做条件编译（Sass 的
@if或 CSS 的@supports不认var()） - 服务端渲染时若依赖 JS 注入主题 class，首屏可能闪动——得配合
data-theme属性 + 同步 class 设置
:root，什么时候该拆成组件级变量。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
