本文经原作者授权翻译。
随着 Web 应用程序看起来越来越大，CSS 也显得越来越大、越来越复杂，但也很混乱。 在良好的上下文中使用 CSS 变量为我们提供了一种重用和轻松修改重复 CSS 属性的机制。
在纯 CSS 支持变量之前，我们有像 Less 和 Sass 这样的预处理器。 它们需要在使用前进行编译css 属性选择器，从而（有时）消除额外的复杂性。
如何定义和使用 CSS 变量（又名自定义属性）
声明一个简单的 JS 变量非常简单：
let myColor = "green";
要声明 CSS 变量，必须在变量名称前添加两个破折号。
body {
--english-green-color: #1B4D3E;
}
今天，要使用 CSS 变量的值，我们可以使用 var(...) 函数。
.my-green-component{
background-color: var(--english-green-color);
}
管理 CSS 变量的最简单方法是在 :root 伪类中声明它们。 由于 CSS 变量遵循与其他 CSS 定义相同的规则，因此将它们放在 :root 上将确保所有选择器都可以访问这些变量。
:root{
--english-green-color: #1B4D3E;
}
浏览器对 CSS 变量的支持
浏览器对 CSS 变量的支持一点也不差。 如果你检查CanIUseCSSVariables，你会发现所有主流浏览器都支持CSS变量。 无论是联通设备还是PC上。
现在，让我们看看这个 CSS 变量的实际效果。
示例 1 - 管理颜色
使用 CSS 变量的最佳选择之一是设计的颜色。 我们可以将它们放入变量中，而不是一遍又一遍地复制和粘贴相同的颜色。
如果有一个令人讨厌的产品希望我们更新特定的红色阴影或将所有按钮设置为白色而不是黑色，那么我们需要做的就是修改该 CSS 变量的值。 我们不需要搜索并替换所有出现的该颜色。
自己尝试一下：
示例 2 - 删除重复代码
通常我们需要创建一些组件的不同变体。 基本风格相同，只是功能略有不同。 我们以带有不同颜色按钮的情况为例。
.btn {
border: 2px solid black;
// more props here
}
.btn:hover {
background: black;
// more props here
}
.btn.red {
border-color: red
}
.btn.red:hover {
background: red
}
像这样使用它们：
然而，这减少了一些代码重复。 在 .red 类中，我们必须将边框颜色和背景设置为蓝色。 万一有一天需要换颜色，那就很麻烦了，需要一件一件地换。 这个问题可以通过CSS变量轻松解决。
.btn {
border: 2px solid var(--color, black);
}
.btn:hover {
background: var(--color, black);
}
.btn.red {
--color: red
}
自己尝试一下：
示例 3 - 使各个属性可读
如果我们想为更复杂的属性值创建快捷方式，那么 CSS 变量非常有用，这样我们就不必记住它。
CSS 属性（例如 box-shadow、transform 和 font）或其他具有多个参数的 CSS 规则是很好的反例。
我们可以将属性放入变量中，这样我们就可以以更易读的格式重用它。
// 主要代码
:root {
--tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
--animate-right: translateX(20px);
}
li {
box-shadow: var(--tiny-shadow);
}
li:hover {
transform: var(--animate-right);
}
自己尝试一下：：0-187
示例 4 - 级联变量
标准级联规则也适用于 CSS 变量。 如果多次声明自定义属性，则 css 文件中最底层的定义将覆盖之前的定义。
下面的示例演示了动态操作用户操作的属性是多么容易，同时还保持代码简洁。
// 主要代码
.orange-container {
--main-text: 18px;
}
.orange-container:hover {
--main-text: 22px;
}
.red-container:hover {
--main-text: 26px;
}
.title {
font-size: var(--title-text);
}
.content {
font-size: var(--main-text);
}
.container:hover {
--main-text: 18px;
}
自己尝试一下：
示例 5 - 使用 CSS 变量切换主题
CSS 变量的优点之一是它们的响应性。 一旦我们更新它们，任何具有 CSS 变量值的属性也将被更新。 为此，只需几行 Javascript 并巧妙使用 CSS 变量，您就可以创建主题切换器机制。
自己尝试一下：
扩张
就像 CSS 中的几乎所有内容一样，变量很容易使用。 以下是一些未包含在示例中的方法，但在个别情况下仍然有用：
注意小写，CSS变量区分大小写
:root {
--color: blue;
--COLOR: red;
}
/*--color and --COLOR are two different variables*/
当我们使用var()函数时，我们还可以传入第二个参数。 如果未找到自定义属性，则将使用此值：
width: var(--custom-width, 33%);
CSS变量可以直接在HTML中使用
body {
max-width: var(--size)
}
CSS 变量可以在其他 CSS 变量中使用：
--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);
CSS 变量可以通过媒体查询用作条件。 例如下面的代码根据屏幕尺寸修改padding的值：
:root {
--padding: 15px
}
@media screen and (min-width: 750px) {
--padding: 30px
}
CSS 变量也可以在 calc() 函数中使用。
--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);
CSS 变量并不是万能的。 它们并不能解决我们在 CSS 领域遇到的所有问题。 此外，它还可以使我们的代码更具可读性和可维护性。
然而，它们极大地提高了修改小文档的便利性。 当我们只想修改变量时，只需将所有常量设置在一个单独的文件中css 属性选择器，就可以使我们不必跳过数千行代码。
~完结，我是小智，我去spa了，记得点赞支持油。
