CSS 变量（自定义属性）使用指南：让样式表更灵活

小飞兽 HTML/CSS 300 次阅读 2026-07-24

Introduction

CSS 变量，又称自定义属性（CSS Custom Properties），自 CSS3 引入以来已成为现代 CSS 开发的基础设施。通过在根级别定义变量，可以在整站范围内统一管理颜色、间距、字号等设计 token，一处修改全局生效。结合 JavaScript 动态读写，CSS 变量还能实现主题切换、动态样式等高级功能。本文系统讲解 CSS 变量的定义、继承、作用域及实战用法。

定义与使用

/* 定义：在选择器内用 -- 前缀声明 */
:root {
    --primary-color: #8b4513;
    --font-size-base: 16px;
    --spacing-lg: 24px;
    --border-radius: 8px;
}
/* 使用：var() 函数引用 */
.button {
    background-color: var(--primary-color);
    font-size: var(--font-size-base);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
}
/* 带默认值的 var() */
.text {
    color: var(--text-color, #2c2c2c); /* 第二个参数为默认值 */
}

继承与作用域

/* 变量遵循 CSS 继承规则 */
:root { --text-color: #2c2c2c; }
.card {
    --text-color: #8b4513; /* 仅在 .card 及后代中生效 */
    color: var(--text-color);
}
.card.dark { --text-color: #faf8f5; } /* 黑暗主题覆盖 */
/* 在媒体查询中修改变量 */
@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
        --spacing-lg: 16px;
    }
}

JavaScript 读写 CSS 变量

// 读取变量
const root = document.documentElement;
const color = getComputedStyle(root)
    .getPropertyValue('--primary-color').trim();
console.log(color); // #8b4513
// 写入变量（动态主题切换）
root.style.setProperty('--primary-color', '#c0392b');
// 批量修多个变量
root.style.setProperty('--bg-color', '#1a1a1a');
root.style.setProperty('--text-color', '#ffffff');

实战：主题切换系统

:root {
    --bg: #faf8f5;
    --text: #2c2c2c;
    --accent: #8b4513;
}
[data-theme="dark"] {
    --bg: #1a1a1a;
    --text: #f0f0f0;
    --accent: #c0392b;
}
body { background: var(--bg); color: var(--text); }
a { color: var(--accent); }
// JavaScript 切换
const toggleTheme = () => {
    const current = document.body.dataset.theme || '';
    document.body.dataset.theme = current === 'dark' ? '' : 'dark';
};

运行效果

打开上述主题切换代码，点击按钮时页面背景色、文本色、链接色同时切换，无需重新加载页面。浏览器开发者工具中修改 CSS 变量的值，页面对应样式实时更新。

常见问题

var() 默认值：第二个参数可以嵌套 var()，但注意循环依赖会报错。

兼容性：IE 不支持 CSS 变量，现代浏览器均已支持。
大小写敏感：--color 和 --Color 是两个不同的变量。

空格处理：getPropertyValue 返回值两端可能有空格，trim() 后再使用。