CSS 变量实战技巧：6个能直接用的核心玩法

摘要：你一定写过 var(--color)，但 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() 灵活相乘

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_13660