CSS3支持变量定义吗

发布时间：2026-08-30 13:58:55 来源：亿速云阅读：95 作者：小樊栏目：编程语言

是的，CSS3 支持变量定义，这是通过 CSS 自定义属性（Custom Properties） 实现的，通常被称为 CSS 变量。

一、什么是 CSS 变量

CSS 变量允许你在样式表中定义可复用的值，并在整个文档中使用它们。

✅ 典型用途：

统一管理颜色、字体、间距等
实现主题切换（如暗黑模式）
提高样式可维护性

二、基本语法

1️⃣ 定义变量

变量必须定义在 选择器内部，最常见的是定义在 :root 中（全局作用域）：

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

-- 开头的是变量名，区分大小写。

2️⃣ 使用变量

使用 var() 函数读取变量：

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

三、作用域规则

CSS 变量具有 作用域特性：

:root {
  --color: red;
}

.box {
  --color: blue;
  color: var(--color); /* 使用 blue */
}

.text {
  color: var(--color); /* 使用 red */
}

✅ 就近原则：优先使用当前作用域内的变量。

四、默认值

如果变量未定义，可提供默认值：

.box {
  color: var(--color, #000); /* 如果 --color 不存在，使用 #000 */
}

五、在 JavaScript 中操作 CSS 变量

CSS 变量可以被 JS 动态修改：

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

document.documentElement.style.getPropertyValue('--primary-color');

六、注意事项

✅ 支持情况

✅ 所有现代浏览器（Chrome、Firefox、Safari、Edge）
❌ IE 不支持

⚠️ 常见注意点

变量值不会做计算

--size: 10px;
width: var(--size) * 2; /* ❌ 不支持 */

正确方式：

--size: 10px;
width: calc(var(--size) * 2);

变量名区分大小写：
```
--color ≠ --Color
```

七、示例：主题切换

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

.dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}

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

<body class="dark">
  <p>暗黑模式</p>
</body>

✅ 总结一句话：
CSS3 支持变量定义，通过 --变量名 定义，用 var() 使用，是现代 CSS 中非常重要的特性。

如果你需要，我也可以帮你对比 CSS 变量 vs 预处理器变量（Sass/Less） 的区别。

向AI问一下细节