CSS变量正式名称为自定义属性，允许开发者在样式表中定义可复用的值，后续可以直接引用这些变量，避免重复书写相同的样式值，也方便后续统一修改样式。
CSS变量的定义规则
CSS变量必须以两个连字符--作为前缀开头，变量名区分大小写，定义时需要依附于某个选择器，通常我们会把全局变量定义在:root伪类中，这样整个文档都可以访问到这些变量。
定义变量的基础语法如下：
/* 定义全局CSS变量 */
:root {
--primary_color: #1890ff;
--font_size_base: 14px;
--border_radius: 4px;
}
/* 定义局部CSS变量，仅在.card元素及其子元素中可用 */
.card {
--card_bg: #f5f5f5;
--card_padding: 16px;
}
CSS变量的使用方式
定义好CSS变量之后，需要使用var()函数来引用变量，该函数接收两个参数，第一个是要使用的变量名，第二个是可选的后备值，当变量未定义时会使用后备值。
使用变量的示例如下：
/* 使用全局变量 */
.btn-primary {
background-color: var(--primary_color);
font-size: var(--font_size_base);
border-radius: var(--border_radius);
}
/* 使用局部变量，同时设置后备值 */
.card {
background-color: var(--card_bg, #fff);
padding: var(--card_padding, 12px);
}
CSS变量的作用域与覆盖规则
CSS变量和CSS其他属性一样遵循层叠规则，变量的作用域由定义它的选择器决定，子元素可以继承父元素定义的变量，后定义的同名变量会覆盖先定义的变量。
- 全局变量定义在
:root中，所有元素都可以访问 - 局部变量定义在某个选择器内，仅该选择器及其子元素可以访问
- 如果子元素重新定义了同名变量，会覆盖继承来的父元素变量值
作用域覆盖的示例如下：
:root {
--text_color: #333;
}
.dark-mode {
--text_color: #fff;
}
/* 普通元素使用全局的#333颜色 */
/* dark-mode类下的元素使用#fff颜色 */
.text {
color: var(--text_color);
}
JavaScript操作CSS变量
CSS变量不仅可以在CSS中使用，还可以通过JavaScript动态修改，实现动态换肤、主题切换等功能。
JavaScript操作CSS变量的示例如下：
// 获取根元素上定义的CSS变量值
const rootStyle = getComputedStyle(document.documentElement);
const primaryColor = rootStyle.getPropertyValue('--primary_color').trim();
console.log(primaryColor); // 输出 #1890ff
// 修改根元素上的CSS变量值
document.documentElement.style.setProperty('--primary_color', '#ff4d4f');
// 修改某个元素上的局部CSS变量
const cardElement = document.querySelector('.card');
cardElement.style.setProperty('--card_bg', '#e6f7ff');
CSS变量使用注意事项
- 变量名必须以
--开头，否则浏览器无法识别为CSS变量 - 变量值不需要加引号，加引号后引号会成为值的一部分
- var()函数只能用在属性值的位置，不能用作属性名或者选择器
- CSS变量不支持直接做运算，需要结合
calc()函数使用，例如width: calc(var(--base_width) * 2);
实际开发案例
下面是一个主题切换的完整示例，通过切换类名修改CSS变量实现亮色和暗色主题的切换：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
:root {
--bg_color: #fff;
--text_color: #333;
--btn_bg: #1890ff;
}
.dark-theme {
--bg_color: #1f1f1f;
--text_color: #fff;
--btn_bg: #177ddc;
}
body {
background-color: var(--bg_color);
color: var(--text_color);
transition: all 0.3s;
}
.btn {
background-color: var(--btn_bg);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn" onclick="toggleTheme()">切换主题</button>
<p>这是一段测试文本，用于展示主题切换效果</p>
<script>
function toggleTheme() {
document.documentElement.classList.toggle('dark-theme');
}
</script>
</body>
</html>
CSS变量custom_properties前端样式变量复用修改时间：2026-06-12 02:09:27