CSS如何通过变量实现颜色组件复用_利用CSS var实现样式统一

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-theme="dark"] 也能定义自己的 --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 图片生成器