CSS 变量实战技巧：6个能直接用的核心玩法
你一定写过 var(--color)，但 CSS 变量的真正威力远不止定义颜色这么简单。下面这6个实战技巧，每个都可以直接复制到项目中使用。
技巧1：默认值兜底，防止变量未定义
/* 如果 --gap 未定义，自动回退到 16px */
.card {
margin: var(--gap, 16px);
}第二个参数就是默认值。即使变量从未定义过，页面也不会出现样式空白的问题。
技巧2：用 JS 动态读写 CSS 变量
const root = document.documentElement;
// 读取
const color = getComputedStyle(root).getPropertyValue('--primary').trim();
// 写入
root.style.setProperty('--primary', '#ff6b6b');无需修改 class，JS 直接改 CSS 变量，整个页面主题实时刷新，比切换 class 的方式优雅得多。
技巧3：一键换肤，最简主题切换实现
:root {
--bg: #ffffff;
--text: #333333;
}
[] {
--bg: #1a1a1a;
--text: #eeeeee;
}
body {
background: var(--bg);
color: var(--text);
}需要注意：不要把主题变量散落在各个组件里。统一在 :root 和主题选择器中管理，后期维护才不会让人抓狂。
技巧4：组件级作用域，变量只在组件内生效
/* 全局默认 */
:root {
--btn-color: #4a9eff;
}
/* 这个按钮用自己的颜色，不影响其他按钮 */
.btn-danger {
--btn-color: #ff4d4f;
background: var(--btn-color);
}
.btn-success {
--btn-color: #52c41a;
background: var(--btn-color);
}CSS 变量遵循级联规则，子元素会自动继承最近的父级定义，这才是组件样式隔离的正确姿势。
技巧5：配合 calc() 实现响应式弹性间距
:root {
--space-unit: 8px;
}
.section {
padding: calc(var(--space-unit) * 3); /* 24px */
gap: calc(var(--space-unit) * 2); /* 16px */
margin-bottom: calc(var(--space-unit) * 4); /* 32px */
}
/* 移动端统一缩小基准值 */
@media (max-width: 768px) {
:root {
--space-unit: 6px;
}
}只改一个变量，全局间距同步缩小，响应式设计中的“设计令牌”思路就是这样来的。
技巧6：CSS 变量传递纯数字，供 calc() 复用
:root {
--columns: 3;
}
.grid {
/* 变量里存纯数字，不带单位 */
grid-template-columns: repeat(var(--columns), 1fr);
width: calc(var(--columns) * 120px);
}
@media (max-width: 600px) {
:root {
--columns: 1;
}
}需要注意：变量存纯数字时，calc() 里需要自己加上单位（如 var(--columns) * 1px），不能直接把变量当成带单位的值使用，否则会无效。
兼容性
| 浏览器 | 最低版本 |
|---|---|
| Chrome | 49+ |
| Firefox | 31+ |
| Safari | 9.1+ |
| Edge | 15+ |
覆盖率96%以上，可以放心上生产环境。
总结
| 技巧 | 一句话总结 |
|---|---|
| 默认值兜底 | var(--x, fallback) 防止样式崩溃 |
| JS读写 | getPropertyValue / setProperty 动态控制 |
| 主题切换 | 通过 |
| 组件作用域 | 在子选择器中重新定义变量，利用级联自动隔离 |
| 配合calc() | 用变量存储基准值，实现全局统一缩放 |
| 纯数字变量 | 变量存数字不带单位，配合 calc() 灵活相乘 |
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
