在网页样式开发中，CSS变量（官方称为自定义属性）是一种由开发者自己定义、可在整个文档中复用的占位值。它不像传统CSS那样把颜色、字体大小写死在每条规则中，而是把这类易变的设计令牌抽出来统一管理。借助CSS变量，我们可以让样式具备更好的可维护性和动态调整能力。
一、CSS变量的基础声明语法
声明一个CSS变量并不复杂，其核心规则是：属性名必须以两个连字符（--）开头，属性值可以是任意合法的CSS值。通常我们会把全局变量放在:root伪类选择器中，因为:root代表文档根元素，在其中定义的变量能够被页面所有元素继承。
下面是一段最基础的声明代码，我们在根节点中定义了主题色和基础间距，随后在普通规则里通过var()函数进行消费。注意，变量名区分大小写，--color和--Color是两个不同的变量。
:root {
--main-color: #3498db;
--base-padding: 16px;
}
.button {
background-color: var(--main-color);
padding: var(--base-padding);
color: #fff;
}
上述写法的优势在于，当我们需要更换网站主色调时，仅需修改:root中的--main-color一处，所有引用了该变量的按钮、链接等组件都会同步更新。这种集中式管理明显优于逐个查找替换十六进制颜色值。
此外，var()函数支持传入第二个参数作为回退值。若变量未被声明或无效，浏览器会使用回退值渲染，从而避免样式完全丢失。例如var(--unknown, #000)在变量缺失时会使用黑色。
二、变量的作用域与继承机制
CSS变量遵循标准CSS层叠与继承模型。在某个选择器内声明的变量，只对该选择器及其后代元素可见。这意味着你可以为不同区块定义同名的局部变量，而不会相互干扰。
以下示例展示局部覆盖效果：卡片组件内部重新定义了--main-color，那么卡片里的按钮就会使用局部值，而页面其他区域仍使用全局蓝。
:root {
--main-color: #3498db;
}
.card {
--main-color: #e74c3c;
}
.card .button {
background-color: var(--main-color); /* 使用红色 */
}
这种基于继承的作用域控制，让CSS变量比预处理器（如Sass的变量）更灵活。Sass变量在编译后就固定了，而原生CSS变量在浏览器运行时仍可被JavaScript修改，也可被媒体查询重新赋值。
需要提醒的是，自定义属性本身仅仅是“属性”，它会被继承，但如果你用var()引用了一个未定义的变量且没设回退，该声明会被视为无效，元素将使用初始值或继承值，而不是报错中断整个样式表。
三、通过JavaScript动态操作变量
因为CSS变量是真实的DOM属性，所以我们可以用JS轻松读写。调用element.style.setProperty('--xxx', value)即可设置，用getComputedStyle(element).getPropertyValue('--xxx')读取。这为暗黑模式切换、用户自定义主题提供了轻量方案。
下面例子演示点击按钮后改变根节点的主题色，页面中所有引用该变量的元素会立刻重绘：
const root = document.documentElement;
function changeTheme(color) {
root.style.setProperty('--main-color', color);
}
// 假设页面有一个按钮
document.querySelector('#themeBtn').addEventListener('click', () => {
changeTheme('#9b59b6');
});
相比过去要靠增删class或重写style标签的做法，直接修改变量显著减少了DOM操作量。同时，由于变量改动会触发仅相关属性的重算，性能开销也更低。
在大型项目中，我们常把用户偏好存在本地，初始化时读取并赋值给:root变量，从而实现记忆化的个性主题。这种方式不需要任何框架支持，原生就能跑。
四、常见误区与注意事项
新手容易把CSS变量和预处理器的变量混为一谈，以为在CSS文件里写--x: 1就能像Sass那样做数学运算。实际上，原生变量存储的是字符串片段，若要进行calc()计算，必须显式包裹。
例如下面写法才是合法的间距翻倍：
:root {
--gap: 8px;
}
.box {
margin: calc(var(--gap) * 2);
}
另一个误区是滥用变量导致可读性下降。不是所有值都适合提取，像一次性使用的特定阴影，硬抽成变量反而让维护者来回跳转查找。建议仅对重复出现、具有设计语义（主色、圆角、层级阴影）的值进行变量化。
最后注意，自定义属性名中的连字符是必须的，且不能用var()去声明变量，只能消费变量。声明永远用普通属性赋值形式，这也是“声明你的第一个CSS变量”的最核心动作。
五、小结
声明第一个CSS变量只需记住：用--名称: 值在:root或任意选择器里定义，用var(--名称)使用。它天然支持继承与局部覆盖，能被JS实时改写，也能配合calc()完成计算。掌握这套机制后，你就能从写死样式迈向可配置的设计系统。
CSS变量custom_properties前端样式修改时间：2026-08-02 10:03:30