CSS的var()函数允许定义自定义属性实现样式复用与动态管理，相比预处理器变量具有运行时动态性、继承与层叠优势，适用于主题切换和JS交互，提升维护效率与灵活性。
CSS的
var()
函数本质上是一个强大的工具，它让我们能在样式表中定义自己的自定义属性（也就是我们常说的CSS变量），然后通过
var()
函数来引用这些属性值。这就像给颜色、字体大小或边距等常用值起了个名字，一旦需要修改，只需改动一处，所有引用它的地方都会随之更新。这样一来，样式管理变得前所未有地简洁、灵活，代码的复用性也自然而然地大幅提升了。
在我看来，
var()
函数和它背后的自定义属性（Custom Properties）是CSS发展史上一个里程碑式的进步。以前我们面对一套复杂的设计系统，想要调整某个品牌色，那可真是个体力活，全局搜索替换是常态，还得提心吊胆有没有漏掉或者替换错的地方。但有了自定义属性，这一切都变了。
它的核心机制很简单：你用
--
前缀来定义一个自定义属性，比如
--primary-color: #007bff;
，这通常会放在
:root
选择器里，让它成为全局可用的变量。然后，在任何需要这个颜色值的地方，你只需写
color: var(--primary-color);
。
这种方式带来的好处是显而易见的。首先是样式的一致性。想象一下，一个设计系统里有几十个地方用到同一个主色调，现在只需要在
:root
里定义一次，所有地方都引用它。如果品牌色更新了，你只需要修改
:root
里的那一行代码，整个网站的颜色都会瞬间同步更新，这种效率提升简直是质的飞跃。
其次是主题切换的便捷性。通过在不同的选择器（比如一个
body.dark-theme
类）下重新定义相同的自定义属性，你可以轻松实现深色模式或多主题切换。比如：
:root {
--bg-color: #fff;
--text-color: #333;
}
.dark-theme {
--bg-color: #333;
--text-color: #fff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
这样，只需给
body
添加或移除
dark-theme
类，整个页面的背景和文字颜色就会无缝切换。
再者，它还提供了更强大的动态性。JavaScript可以直接读取和设置自定义属性的值，这意味着我们可以用JS来动态地改变CSS变量，从而实现更复杂的交互和动画效果，而无需直接操作DOM元素的样式。这打开了CSS和JS之间更深层次的协作空间，让前端开发有了更多想象力。对我来说，这不仅仅是简化，更是一种解放，把我们从繁琐的样式维护中解脱出来，可以投入更多精力去思考用户体验和功能实现。
CSS var()
函数与预处理器变量有什么不同？
很多人刚接触CSS自定义属性和
var()
函数时，会自然而然地将它们与Sass、Less这类CSS预处理器中的变量进行比较。我刚开始也是如此，觉得它们功能类似，都是为了提高复用性。但实际上，它们之间存在着根本性的区别，理解这些差异对于我们选择合适的工具至关重要。
最核心的区别在于处理阶段。预处理器变量是在编译阶段被处理的。这意味着，当你用Sass定义一个
$primary-color: #f00;
，在编译成标准CSS文件时，所有引用
$primary-color
的地方都会被直接替换成
#f00
。一旦编译完成，最终的CSS文件里就不再有变量的概念了，只剩下硬编码的值。
而CSS自定义属性（
--*
）和
var()
函数则是在运行时被浏览器解析的。它们是真正的CSS属性，遵守CSS的层叠（cascading）和继承（inheritance）规则。这意味着：
-
作用域和继承： 预处理器变量没有CSS的作用域概念，它们只是文本替换。但CSS自定义属性有明确的作用域，可以定义在
:root
全局，也可以定义在特定的元素或类下，并且可以被子元素继承。这使得它们在构建组件化、模块化的样式时更加灵活。 -
动态性： 这是
var()
最大的优势之一。由于它在运行时存在，JavaScript可以直接通过element.style.setProperty('--my-var', 'value')或getComputedStyle(element).getPropertyValue('--my-var')来读取和修改自定义属性的值。预处理器变量则无法做到这一点，因为它们在浏览器看到之前就已经消失了。这种动态性是实现主题切换、响应式调整、甚至一些复杂动画的关键。 - 层叠： CSS自定义属性遵循CSS的层叠规则。如果你在一个父元素上定义了一个自定义属性，在子元素上又重新定义了同名属性，那么子元素将使用自己的定义，而其更深层的子元素则会继承子元素的定义。这与CSS属性的常规行为完全一致。
简单来说，预处理器变量是“查找替换”，而CSS自定义属性是“真正的变量”，拥有CSS的生命周期和行为。它们并不是互相替代的关系，而是互补的。预处理器可以在编译时处理一些复杂的逻辑、混入（mixins）和函数，而CSS自定义属性则在运行时提供了无与伦比的灵活性和动态性。我个人觉得，理解了这一点，就能更好地利用它们各自的优势，构建更健壮、更灵活的样式系统。
如何在实际项目中有效使用CSS自定义属性和var()
？
在实际项目里，要充分发挥CSS自定义属性和
var()
的威力，我觉得关键在于规划和约定。它不仅仅是替换几个颜色值那么简单，更是一种组织和管理样式的新思路。
1. 集中定义核心变量： 通常，我会在
:root
选择器中定义项目的全局核心变量，包括：
- 颜色体系： 主色、辅助色、文本色、背景色、边框色等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
