CSS变量怎么用？var函数全解析

CSS变量（即自定义属性）通过以`--`开头的声明和`var()`函数实现样式值的复用与动态管理，不仅能大幅提升代码可维护性和设计一致性，还支持默认值回退、作用域控制、JavaScript实时修改以及主题切换和响应式适配等高级场景，是现代前端开发中替代预处理器变量的原生高效方案，且在主流浏览器中已获得广泛支持。

CSS 属性值确实可以使用变量，这是通过 CSS 自定义属性（Custom Properties）配合 var() 函数实现的。这种机制让开发者可以在样式表中定义可复用的值，提升维护效率和代码清晰度。

什么是CSS自定义属性

CSS 自定义属性是用户定义的、以两个连字符（--）开头的属性名，用于存储可重用的值。它们可以定义在任意选择器上，通常推荐定义在根元素（:root）中，以便全局访问。

:root {
  --primary-color: #007bff;
  --border-radius: 8px;
  --font-size-large: 1.5rem;
}

这些值不会直接作用于页面，而是作为“变量”被其他属性通过 var() 引用。

如何使用var()函数引用变量

var() 函数用于读取自定义属性的值，并将其插入到标准 CSS 属性中。语法为 var(--variable-name)，也可设置默认值作为备选。

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-large);
}

.card {
  color: var(--text-color, #333);
  padding: var(--spacing, 16px);
}

当 --text-color 未定义时，将使用 #333 作为默认颜色。

变量的作用域与继承

自定义属性遵循 CSS 的层叠和继承规则。定义在 :root 中的变量全局可用；定义在特定类或元素上的变量，仅在该元素及其子元素中有效。

.theme-dark {
  --primary-color: #ff6b6b;
}

.theme-dark .button {
  background-color: var(--primary-color); /* 使用红色 */
}

当 .button 在 .theme-dark 内部时，会使用局部定义的 --primary-color。

实用场景与优势

使用 CSS 变量适合管理主题色、间距、字体层级等统一设计系统。

• 便于实现夜间模式切换：通过 JavaScript 动态修改变量值即可批量更新样式
• 减少重复代码，提高可维护性
• 支持响应式设计中的动态调整

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

这行代码能即时改变整个页面中所有引用该变量的样式。

基本上就这些。CSS 自定义属性 + var() 提供了原生的变量支持，无需预处理器也能写出更灵活、易维护的样式代码。注意兼容性：现代浏览器普遍支持，IE 不支持需评估使用场景。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~