CSS 变量：一个变量救你一百次复制粘贴
先说结论
CSS 变量就是给颜色、尺寸这些值起个"名字"，以后改一处，全部自动更新。
以前你可能写了 50 次 #3b82f6，现在只需要写一次 --brand-color: #3b82f6，然后到处用 var(--brand-color)。
为什么需要它？看个真实场景
没有变量时，你的代码长这样：
css
css
.btn-primary { background: #3b82f6; }
.btn-primary:hover { background: #2563eb; }
.card-title { color: #3b82f6; }
.link { color: #3b82f6; }
.badge { background: #3b82f6; }老板说： "蓝色换成紫色。"
你要改 5 处。
有了变量：
css
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
css
:root {
--primary-color: #3b82f6;
--text-color: #1f2937;
--spacing-md: 16px;
--radius: 8px;
}
:root相当于全局作用域，哪里都能用。
第二步：使用变量
css
css
.button {
background: var(--primary-color);
color: var(--text-color);
padding: var(--spacing-md);
border-radius: var(--radius);
}第三步：支持默认值（可选）
万一变量没定义，给个保底值：
css
css
.button {
background: var(--primary-color, #999); /* 如果 --primary-color 不存在，用 #999 */
}变量不只能存颜色
| 类型 | 示例 | 用途 |
|---|---|---|
| 颜色 | --brand: #3b82f6 |
品牌色、文字色 |
| 尺寸 | --space: 16px |
间距统一管理 |
| 圆角 | --radius: 8px |
全站圆角一致 |
| 字体 | --font: "Inter", sans-serif |
字体族 |
| 甚至可以存数字 | --scale: 1.2 |
缩放比例 |
css
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
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
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 只需要切换 <body> 的 class：
javascript
js
document.body.classList.toggle('dark');不用写任何 if/else 样式，变量自动生效。
常见问题速查
| 问题 | 答案 |
|---|---|
变量名必须用 -- 开头？ |
✅ 是的，这是 CSS 变量的语法规定 |
| 变量名区分大小写？ | ✅ --color 和 --Color 是两个变量 |
| 能在媒体查询里用吗？ | ✅ 完全可以 |
| 浏览器支持？ | 所有现代浏览器都支持，IE 不支持（2026 年了，不用管 IE） |
| 能用在 calc() 里吗？ | ✅ width: calc(var(--width) * 2) |
最佳实践：建一套自己的变量命名体系
别乱起名，按功能分组：
css
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 变量 = 给值起名字。定义一次，到处使用，一改全改。加上暗色模式覆盖，你的样式系统就活了。
现在去把你项目里重复出现的颜色和尺寸，全换成变量吧。改一次你就回不去了。