CSS 变量：一个变量救你一百次复制粘贴 CSS 变量：一个变量救你一百次复制粘贴 先说结论 CSS 变量就是给颜色、尺寸这些值起个"名字"，以后改一处，全部自动更新。 以前你可能写了 50 次 #3b82f6 ，现在只需要写一次 --brand-color: #3b82f6 ，然后到处用 var(--brand-color) 。 为什么需要它？看个真实场景 没有变量时，你的代码长这样： css .btn-primary { background : #3b82f6 ; } .btn-primary :hover { background : #2563eb ; } .card-title { color : #3b82f6 ; } .link { color : #3b82f6 ; } .badge { background : #3b82f6 ; } 老板说： "蓝色换成紫色。" 你要改 5 处。 有了变量： css :root { --brand-color : #3b82f6 ; } .btn-primary { background : var (--brand-color); } .btn-primary :hover { background : #2563eb ; } .card-title { color : var (--brand-color); } .link { color : var (--brand-color); } .badge { background : var (--brand-color); } 老板说换紫色？ 改一行，全部搞定。 怎么用？三步搞定 第一步：定义变量（一般写在 :root 里） css :root { --primary-color : #3b82f6 ; --text-color : #1f2937 ; --spacing-md : 16px ; --radius : 8px ; } :root 相当于全局作用域，哪里都能用。 第二步：使用变量 css .button { background : var (--primary-color); color : var (--text-color); padding : var (--spacing-md); border-radius : var (--radius); } 第三步：兼容默认值（可选） 万一变量没定义，给个保底值： css .button { background : var (--primary-color, #999 ); /* 如果 --primary-color 不存在，用 #999 */ } 变量不只能存颜色 类型 示例 用途 颜色 --brand: #3b82f6 品牌色、文字色 尺寸 --space: 16px 间距统一管理 圆角 --radius: 8px 全站圆角一致 字体 --font: "Inter", sans-serif 字体族 甚至可以存数字 --scale: 1.2 缩放比例 css :root { --space-xs : 4px ; --space-sm : 8px ; --space-md : 16px ; --space-lg : 24px ; --space-xl : 32px ; --radius : 8px ; --font-base : "Inter" , sans-serif; --transition : 0.2s ease; } 然后你的组件全用这些变量，风格高度统一。 变量可以被覆盖（这才是杀手级能力） 变量有 作用域 ，子元素可以覆盖父元素的变量： css :root { --text-color : #1f2937 ; } .dark-theme { --text-color : #f9fafb ; /* 只在 .dark-theme 内部生效 */ } .dark-theme p { color : var (--text-color); /* 用的是 #f9fafb */ } body p { color : var (--text-color); /* 用的是 #1f2937 */ } 一键换主题，就靠这一招。 实战：暗色模式切换 css :root { --bg : #ffffff ; --text : #1f2937 ; --card-bg : #f3f4f6 ; } /* 暗色模式只需要覆盖这几个变量 */ .dark { --bg : #111827 ; --text : #f9fafb ; --card-bg : #1f2937 ; } /* 组件完全不用改，自动适配 */ .card { background : var (--card-bg); color : var (--text); } JavaScript 只需要切换 的 class： js document . body . classList . toggle ( 'dark' ); 不用写任何 if/else 样式，变量自动生效。 常见问题速查 问题 答案 变量名必须用 -- 开头？ ✅ 是的，这是 CSS 变量的语法规定 变量名区分大小写？ ✅ --color 和 --Color 是两个变量 能在媒体查询里用吗？ ✅ 完全可以 浏览器支持？ 所有现代浏览器都支持，IE 不支持（2026 年了，不用管 IE） 能用在 calc() 里吗？ ✅ width: calc(var(--width) * 2) 最佳实践：建一套自己的变量命名体系 别乱起名，按功能分组： css :root { /* 🎨 颜色 */ --color-primary : #3b82f6 ; --color-text : #1f2937 ; --color-bg : #ffffff ; /* 📐 间距 */ --space-1 : 4px ; --space-2 : 8px ; --space-4 : 16px ; --space-8 : 32px ; /* 🔤 排版 */ --font-sans : "Inter" , sans-serif; --font-size-base : 16px ; /* ⚡ 动画 */ --transition-fast : 0.15s ease; --transition-normal : 0.3s ease; } 命名带前缀，一眼就知道是颜色、间距还是动画。 一句话总结 CSS 变量 = 给值起名字。定义一次，到处使用，一改全改。加上暗色模式覆盖，你的样式系统就活了。 现在去把你方案里重复出现的颜色和尺寸，全换成变量吧。改一次你就回不去了。