关于 CSS 变量的一些你可能不了解的事！-猿码集

1. CSS 变量概述

CSS 变量也被称为 CSS 自定义属性，它是一个非常强大的工具，它可以让你在 CSS 中定义并复用值。在使用 CSS 变量之前，我们需要使用具体的数值或颜色。例如，如果需要定义一个蓝色按钮，我们可能会写出以下代码：


button {
  background-color: blue;
}

如果需要修改颜色，就需要在所有对应的地方都进行修改，这样非常麻烦。但如果使用 CSS 变量，我们可以这样写：


:root {
  --main-color: blue;
}
button {
  background-color: var(--main-color);
}

这个时候，我们只需要修改根元素中的变量值，就能够统一修改所有使用到该变量的样式了。

在使用 CSS 变量之前，我们需要对它进行定义，这可以通过在 :root 选择器下来完成：


:root {
  --main-color: #cfd8dc;
}

这样我们就定义了一个名为 --main-color 的变量，它的初始值为 #cfd8dc。我们可以通过 var() 函数来使用变量：


p {
  color: var(--main-color);
}

这里我们把变量应用到了 p 元素的颜色上。

和全局变量不一样，局部变量只能在定义变量的选择器内使用。例如：


div {
  --main-color: #cfd8dc;
  background-color: var(--main-color);
}

这里只有 div 内部才能使用 --main-color 这个变量。

CSS 变量是可以被继承的，这点和其他 CSS 属性一样。例如：


:root {
  --main-color: #cfd8dc;
}
.container {
  --main-color: red;
}
.container p {
  color: var(--main-color);
}

这里我们定义了一个全局变量 --main-color，然后在 .container 选择器中重新定义了同名变量并设定了它的值为 red。在 .container p 选择器中，我们使用了 var() 函数来引用变量的值。

CSS 变量可以参与数学计算，并且在计算过程中自动转换成数值类型。例如：


:root {
  --width: 200px;
  --height: 125px;
}
img {
  width: var(--width);
  height: calc(var(--height) / 2);
}

在这个例子中，我们使用了 calc() 函数来计算图片的高度为宽度的一半。

在使用 CSS 变量时需要注意浏览器的兼容性。目前所有现代浏览器都支持 CSS 变量，包括：

Chrome 49+

Firefox 31+

Safari 9.1+

Edge 15+

Opera 36+

但是，IE 浏览器不支持 CSS 变量，如果你需要兼容 IE，可以考虑使用?css-vars-ponyfill?这个 polyfill 工具。

CSS 变量是一个强大的工具，它能够让我们在 CSS 中定义并复用值，从而更加方便地管理样式。在使用 CSS 变量时需要注意浏览器的兼容性，并且要细致地管理变量的引用关系，避免出现意料之外的问题。