CSS变量的应用

在前端开发中，CSS 变量（CSS Custom Properties）为开发者提供了一种原生的、强大的方式来定义和使用可复用的值，极大地提升了样式的可维护性和动态性。

---

什么是CSS变量？

基本语法

CSS 变量的命名以两个连字符（--）开头，例如 --primary-color。

:root {
  --primary-color: #007bff;
}

• :root 伪类选择器代表文档的根元素（通常是 html），在这里定义变量可以使变量在整个文档中全局可用。
• 变量值可以是颜色、长度、字符串等。

使用变量：var() 函数

要使用定义好的变量，需要使用 var 函数：

.button {
  background-color: var(--primary-color);
  color: white;
}

---

CSS变量的核心特性

1. 继承性

CSS 变量遵循 CSS 的继承规则。如果一个元素没有定义某个变量，它会从其父元素继承该变量的值。

.container {
  --text-color: #333;
}

.container .title {
  color: var(--text-color); /* 继承自 .container */
}

2. 局部作用域

在任何选择器中定义变量，从而创建局部作用域：

.card {
  --card-bg: #fff;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

3. 动态修改

通过 JavaScript 动态修改变量值，从而实时改变样式。

// 获取根元素
const root = document.documentElement;

// 修改变量
root.style.setProperty('--primary-color', '#dc3545');

---

实际应用

例如主题切换

利用 CSS 变量，可以实现亮色/暗色主题切换。

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

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --accent-color: #00bcd4;
}

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

.accent {
  color: var(--accent-color);
}

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? '' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
}

兼容性

CSS 变量在现代浏览器中支持良好：

• Chrome 49+
• Firefox 31+
• Safari 9.1+
• Edge 79+
• 不支持 IE

对于需要支持旧版浏览器的项目，可以考虑使用 PostCSS 插件进行降级处理。