什么是 CSS 变量？

今天是写代码的日子！2020年我想做的一件事就是每周写一篇代码，所以如果你想了解什么，请告诉我！

很久以前，我接触了 CSS 变量的概念，它彻底改变了游戏规则。利用这个概念，我可以对配色方案进行大规模（或细微）的更改……我经常这么做。

为了在九月份开始尝试使用 CSS 变量，我决定从我的纳米学位课程中拿出我的记忆游戏项目，并将颜色转换为 CSS 变量。下面的代码示例将取自该项目，但它的 Github 代码在这里，其外观照片是特色图片。

CSS 变量是在所有颜色之间保持一致性的一种方法。它可以让您更轻松地一次性更改配色方案，而不必费力地反复修改以确保不会遗漏任何 CSS 颜色。

到目前为止，我只在颜色方面尝试过使用 CSS 变量。但它的用途远不止于此。我还见过它们用于填充或边距。

如何创建 CSS 变量？

出于某种原因，我曾以为 CSS 变量很难学，或者它们会比实际需要的更复杂。但当我发现它其实很简单时，我感到很惊讶。

基本上，创建 :root 伪类，以便将变量应用于整个项目。然后只需输入 --variablename: 即可，无论颜色/大小/任何你想要的内容。

我原本以为它会像 JavaScript 中的变量一样，直接输入就行了。结果不是。现在 CSS 中你必须写成变量。幸运的是，它不需要实现很长的代码。无论你用它来设置颜色、边距还是其他什么，都是一样的。

是的！IE 浏览器不支持它们。我们有人感到惊讶吗？没有。所以解决这个问题的方法是把它添加到变量后面。但是 IE……请把它整理好。

摘自 Mozilla文档。