CSS 颜色变量及var() 函数使用方法

我们制作网站时，网站上有很多的区域颜色都是一样的，通常我们会给这些区域写颜色样式，但这个对于后期的修改比较麻烦。

在CSS3中，出现了CSS 颜色变量，可以定义一下颜色变量将赋值，然后使用var() 函数进行调用。这样以后只要修改变量的值，所有的区域的颜色就都改变了。

下面是CSS 颜色变量及var() 函数使用方法。

CSS 颜色变量使用 -- 前缀来定义，然后使用 var() 函数来引用。

下面是如何定义和使用 CSS 颜色变量的例子：

css

:root {

--primary-color: #333;

--accent-color: #5c6ac4;

--background-color: #f0f0f0;

}



body {

background-color: var(--background-color);

}



h1 {

color: var(--primary-color);

}



button {

background-color: var(--accent-color);

color: var(--primary-color);

}

在这个例子中，我们定义了三个颜色变量：--primary-color，--accent-color 和 --background-color。

然后在 body 选择器中将背景颜色设置为 --background-color 变量的值，在 h1 选择器中将文本颜色设置为 --primary-color 变量的值，在 button 选择器中将背景颜色设置为 --accent-color 变量的值，并将文本颜色也设置为 --primary-color 变量的值。

这样，我们就可以在需要的时候方便地更改这些颜色，只需要在 :root 选择器中更改颜色变量的值即可。