CSS变量需以--开头在:root中定义支持JS动态修改和嵌套引用使用var()时必须加fallback值深色模式应通过prefers-color-scheme媒体查询重定义:root变量不可与Sass变量混用。怎么用 :root 定义全局颜色变量直接在 :root 里声明颜色所有后代元素都能读取比写一堆重复的 #4a90e2 更省事也更可控。它本质是 CSS 自定义属性不是预处理器变量运行时生效支持 JS 动态改。必须用 -- 开头比如 --primary-color不能写成 primary-color值可以是任何合法 CSS 值hsl(210, 70%, 55%)、var(--light-gray)支持嵌套引用不要在 :root 里写带单位的数值如 --spacing: 8px混用颜色容易语义混乱示例:root {br --primary: #4a90e2;br --success: #5cb85c;br --border-radius-sm: 4px;br}组件里怎么安全地用 var() 回调颜色别裸写 color: var(--primary) 就完事——万一变量没定义整个属性会失效浏览器直接跳过可能变成默认黑色或透明页面就“破相”了。一定要加 fallback color: var(--primary, #4a90e2)第二个参数是兜底色fallback 不支持另一个 var()也不能写表达式只能是静态值在伪类或媒体查询里用变量没问题但注意作用域局部 :root 或组件级 div[data-themedark] 也能定义自己的 --primary会覆盖全局避免在 keyframes 里用变量控制颜色动画CSS 动画不响应变量变化得靠 JS element.style.setProperty深色模式切换时为什么 var() 没反应很多人以为只要 media query 里重定义一遍 --primary 就自动切色结果发现按钮颜色没变——其实是样式优先级或作用域没对上。确保深色规则写在浅色之后或者加 !important不推荐更稳妥的是用 prefers-color-scheme :root 组合正确写法media (prefers-color-scheme: dark) {br :root {br --primary: #3a7bc8;br --bg: #1e1e1e;br }br}如果用了 CSS-in-JS 或 Shadow DOM:root 不穿透得在组件根节点上手动 setProperty或者用 getComputedStyle(document.documentElement).getPropertyValue(--primary) 拿值测试时别只看 Chrome DevTools 的 computed 面板它可能缓存旧值强制刷新或改个字母再保存才准和 Sass 变量混用时哪些地方绝对不能碰CSS 变量和 Sass 变量根本不是一个东西前者是浏览器运行时机制后者是编译期替换。混着用容易以为自己写了逻辑其实早被编译没了。 Fotor AI Image Generator Fotor 平台的 AI 图片生成器