CSS 变量（自定义属性）使用指南

一、简介

CSS 变量，又称为CSS 自定义属性（CSS Custom Properties），是 CSS 中一种强大的特性。它允许开发者声明并重复使用可变的值，从而让样式表的维护更加便捷、主题切换更加灵活。CSS 变量由 CSS 作者定义，遵循级联（cascade）规则，能够在整棵 DOM 树上生效。

在早期的网页开发中，如果需要统一管理颜色、间距、字体等设计 token，开发者往往需要借助 SASS 或 LESS 等预处理器中的变量功能。如今，原生 CSS 已经原生支持变量，无需任何构建工具即可使用，极大提升了开发效率与代码可读性。

二、基础语法

2.1 声明与使用

CSS 变量以双连字符（--）开头，命名时推荐使用小写并以连字符分隔。

/* 声明变量 */
:root {
    --primary-color: #3498db;
    --spacing-md: 16px;
    --font-family-base: "Helvetica Neue", sans-serif;
}
/* 使用变量 */
.button {
    background-color: var(--primary-color);
    padding: var(--spacing-md);
    font-family: var(--font-family-base);
}

2.2 var() 函数的备选值

var() 函数接受第二个参数作为备选值（fallback），当变量未定义时使用该值。

element {
    color: var(--text-color, #333);
    margin: var(--gap, 8px);
}

2.3 作用域与级联

CSS 变量遵循级联规则，最近作用域中声明的变量优先级最高。

:root {
    --bg-color: white;
}
.dark-theme {
    --bg-color: #1a1a1a;  /* 覆盖根级变量 */
}
body {
    background-color: var(--bg-color);
}

三、代码示例

3.1 主题切换

:root {
    --theme-bg: #ffffff;
    --theme-text: #000000;
    --theme-accent: #3498db;
}
[data-theme="dark"] {
    --theme-bg: #1a1a1a;
    --theme-text: #f0f0f0;
    --theme-accent: #9b59b6;
}
body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}
.button {
    background-color: var(--theme-accent);
    color: var(--theme-bg);
}
/* JavaScript 切换 */
document.documentElement.setAttribute('data-theme', 'dark');

3.2 组件化间距系统

:root {
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}
.card {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}
.card-title {
    margin-bottom: var(--space-sm);
    font-size: calc(var(--space-md) * 1.25);
}

3.3 动态计算与 calc() 组合

:root {
    --base-size: 16px;
    --scale-ratio: 1.25;
}
h1 { font-size: calc(var(--base-size) * var(--scale-ratio) * var(--scale-ratio)); }
h2 { font-size: calc(var(--base-size) * var(--scale-ratio)); }
h3 { font-size: var(--base-size); }

四、运行效果

当你声明上述变量后，整个页面中所有使用 var(--primary-color) 的元素都会呈现蓝色调。切换 data-theme 属性时，所有使用了 CSS 变量的元素都会自动响应，无需逐个修改 class 或行内样式。

浏览器开发者工具中的 Elements 面板会高亮显示已解析的 CSS 变量值，方便调试。你也可以在 Styles 面板中实时修改变量值，页面会立即反映变化。

五、常见问题

Q1：CSS 变量是否支持负值？

支持。变量值可以是任何有效的 CSS 值，包括负数、百分比、颜色值等。例如 --offset: -10px; 是完全合法的。

Q2：CSS 变量能否在 JavaScript 中读写？

可以。通过 element.style.setProperty('--var-name', 'value') 设置，通过 getComputedStyle(element).getPropertyValue('--var-name') 读取。

// 读取
const color = getComputedStyle(document.documentElement)
              .getPropertyValue('--primary-color').trim();
// 写入
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Q3：变量名大小写敏感吗？

敏感。--PrimaryColor 和 --primarycolor 是两个完全不同的变量。

Q4：CSS 变量能否在媒体查询中覆盖？

完全可以。媒体查询内声明的变量会覆盖外部的变量，这在响应式主题切换中非常有用。

@media (max-width: 768px) {
    :root {
        --spacing-md: 12px;
        --font-size-base: 14px;
    }
}

六、延伸阅读

• MDN - CSS 变量使用指南
• web.dev - CSS Custom Properties 深入理解
• CSS 变量与 Houdini Paint API 结合，可以实现高性能的动态背景效果。
• 配合 CSS clamp() 函数，可实现流畅的响应式排版。