你值得了解的关于CSS变量的知识点！！-猿码集

1. 简介

CSS变量也被称为自定义属性，是一个广泛被使用的新的CSS功能。使用CSS变量，可以创建多个变量来存储可重复使用的值，这些变量可以在多处使用，可以大大减少重复的代码。

CSS变量由一对双横线开头，后面跟着一个名称，名称可以是任何有效的CSS标识符，例如：

--my-variable: blue;

这将创建一个名称为“my-variable”的变量，它的值为“blue”。变量被定义在CSS选择器内部，例如：

body {
  --main-bg-color: #FFF;
  --accent-bg-color: #F7F7F7;
}

在这个例子中，我们创建了两个CSS变量，定义它们作为body元素的属性，值分别是#FFF和#F7F7F7。

可以使用var()函数来调用CSS变量的值，例如：

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

在这个例子中，我们使用var()函数来设置背景颜色，该颜色值来自于角色的--accent-bg-color变量。

还可以通过DOM元素和JavaScript来设置CSS变量的值，例如：

element.style.setProperty('--my-variable', 'red');

在这个例子中，我们从DOM元素中设置了--my-variable的值为“red”。这种设置方式实际上也可以应用于伪元素：

element.style.setProperty('--my-variable', 'red');
element.style.setProperty('--my-variable', '3px 3px gray, 2px 2px white');

在这个例子中，我们还设置了--my-variable的另一个值为一个带有多个背景的字符串值，“3px 3px gray, 2px 2px white”。

还可以将CSS变量提升为全局变量，使其在整个文档中可用。

:root {
  --main-bg-color: #FFF;
  --accent-bg-color: #F7F7F7;
}

在这个例子中，我们将变量定义在:root选择器上，这将使它们成为全局变量，可被文档的任何部分访问。

CSS变量的另一个好处是它们可以从父级元素中继承。

:root {
  --font-family: 'Open Sans', sans-serif;
}
.title {
  font-family: var(--font-family);
}

在这个例子中，我们定义了--font-family变量在:root选择器上，并将其应用于.title元素，从而将字体名称应用于整个标题部分。

CSS变量允许进行简单的计算。

:root {
  --font-size: 16px;
}
h1 {
  font-size: calc(var(--font-size) * 2);
}

在这个例子中，我们定义了--font-size变量为16px，并应用其计算功能以一个两倍的字体大小值应用于h1元素。

通过CSS变量，我们可以从样式表中提取一些通用的颜色、大小等值，这样就可以避免在整个样式表中反复定义这些值，增加了开发的效率，并且使得代码量更加简洁，易于维护。