CSS 变量：样式开发的新维度

什么是 CSS 变量？

CSS 变量（CSS Variables），也称为自定义属性（Custom Properties），是 CSS 规范中引入的一项强大功能。它允许我们在样式表中定义可复用的值，并在需要的地方引用它们。

css 复制代码

:root {
  --primary-color: #42b983;
  --font-size: 16px;
  --spacing: 1rem;
}

.button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

为什么使用 CSS 变量？

1. 减少代码重复

css 复制代码

/* 传统方式 */
.header { color: #42b983; }
.button { background-color: #42b983; }
.card { border-color: #42b983; }

/* 使用 CSS 变量 */
:root { --primary: #42b983; }
.header { color: var(--primary); }
.button { background-color: var(--primary); }
.card { border-color: var(--primary); }

2. 便于主题切换

css 复制代码

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

3. 动态修改样式

javascript 复制代码

document.documentElement.style.setProperty('--primary-color', '#ff6b6b');

CSS 变量的语法

定义变量

css 复制代码

:root {
  --main-color: #42b983;
  --padding: 10px;
  --font-family: 'Helvetica', sans-serif;
}

使用变量

css 复制代码

.element {
  color: var(--main-color);
  padding: var(--padding);
  font-family: var(--font-family);
}

默认值

css 复制代码

.element {
  color: var(--main-color, #333);
}

CSS 变量的作用域

全局作用域

css 复制代码

:root {
  --global-color: #42b983;
}

局部作用域

css 复制代码

.card {
  --card-bg: #f5f5f5;
  background-color: var(--card-bg);
}

.card.dark {
  --card-bg: #333;
}

实际应用场景

场景一：主题系统

css 复制代码

:root {
  --primary: #42b983;
  --secondary: #35495e;
  --success: #2ecc71;
  --warning: #f39c12;
  --danger: #e74c3c;
}

场景二：响应式设计

css 复制代码

:root {
  --container-width: 1200px;
}

@media (max-width: 768px) {
  :root {
    --container-width: 90%;
  }
}

.container {
  max-width: var(--container-width);
}

场景三：组件样式

css 复制代码

.button {
  --button-bg: #42b983;
  --button-color: white;
  --button-padding: 10px 20px;
  
  background-color: var(--button-bg);
  color: var(--button-color);
  padding: var(--button-padding);
}

.button.danger {
  --button-bg: #e74c3c;
}

CSS 变量与 JavaScript 交互

读取变量

javascript 复制代码

const root = document.documentElement;
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');

设置变量

javascript 复制代码

root.style.setProperty('--primary-color', '#ff6b6b');

动态主题切换

javascript 复制代码

function setTheme(theme) {
  const root = document.documentElement;
  
  if (theme === 'dark') {
    root.style.setProperty('--bg-color', '#1a1a1a');
    root.style.setProperty('--text-color', '#ffffff');
  } else {
    root.style.setProperty('--bg-color', '#ffffff');
    root.style.setProperty('--text-color', '#333333');
  }
}

CSS 变量的高级技巧

变量运算

css 复制代码

:root {
  --base-size: 16px;
  --large-size: calc(var(--base-size) * 1.5);
  --small-size: calc(var(--base-size) * 0.75);
}

变量组合

css 复制代码

:root {
  --primary: #42b983;
  --primary-dark: color-mod(var(--primary) blackness(20%));
}

动画支持

css 复制代码

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(var(--scale, 1.1)); }
  100% { transform: scale(1); }
}

.element {
  --scale: 1.2;
  animation: pulse 2s infinite;
}

浏览器兼容性

CSS 变量在现代浏览器中得到了广泛支持：

Chrome 49+
Firefox 31+
Safari 9.1+
Edge 15+

对于不支持的浏览器，可以使用 PostCSS 插件进行降级处理。

CSS 变量 vs 预处理器变量

特性	CSS 变量	Sass/Less
运行时修改	✅	❌
作用域	支持	有限
继承	✅	❌
计算	有限	强大

最佳实践

1. 定义清晰的变量命名规范

css 复制代码

:root {
  --color-primary: #42b983;
  --color-primary-hover: #359469;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

2. 使用 :root 定义全局变量

css 复制代码

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
}

3. 为变量提供默认值

css 复制代码

.element {
  color: var(--text-color, #333);
}

总结

CSS 变量为样式开发带来了革命性的变化，它让我们能够：

创建更加灵活和可维护的样式系统
实现动态主题切换
减少代码重复
提高开发效率

随着浏览器支持的不断完善，CSS 变量已经成为现代前端开发不可或缺的工具。掌握 CSS 变量，将使你的样式开发更加高效、优雅。