你需要知道的CSS 变量

前言

当 Web 项目变得更大时，它们的 CSS 通常会变得大到天文数字，而且常常会变得凌乱。为了解决这个问题，CSS 变量很快就会进入主流浏览器，使开发人员能够重用和轻松编辑重复出现的 CSS 属性。

定义和使用 CSS 变量

变量遵循于任何其他 CSS 定义相同的作用域和继承规则。使用它们的最简单方法是通过将声明添加到:root伪类来使它们全局可用，以便所有其他选择器都可以继承它。

:root {
     --awesome-blue : #2196F3 ;
}

要访问变量内的值，我们可以使用var(...)语法。请注意，名称区分大小写，因此--foo != --FOO。

.some-element{
    background-color: var(--awesome-blue);
}

下面是几个示例，展示了 CSS 变量的典型用法。

示例 1 - 主题颜色

当我们需要对多个元素反复应用相同的规则时，CSS 中的变量就起到了作用，例如主题中的重复颜色。我们可以将它放在一个变量中，而不是每次我们想重复使用相同的颜色时都进行复制和粘贴。

现在，如果我们的客户不喜欢我们选择的蓝色主题，我们可以仅在一个地方（变量的定义）更改样式来更改整个主题的颜色。如果没有变量，我们就不得不手动搜索和替换每一个出现的地方。

//html
<div class="container">主题色</div>
//css
:root{
    --primary-color: #B1D7DC;
}
.container{
    background-color: var(--primary-color);
}

示例 2 - 复杂的属性

变量的另一个重要用途是当我们想要保存一个更复杂的属性值时，这样我们就不必记住它了，如box-shadow,transform和font。

//html
<ul>
    <li>Hover on me!</li>
</ul>
//css
:root{
    --tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    --animate-right: translateX(20px);
}
li{
    box-shadow: var(--tiny-shadow);
}
li:hover{
    transform: var(--animate-right);
}

例 3 - 动态更改变量

下面的示例演示了根据用户操作来动态的操作属性是多么的容易，同时代码更加的清晰和简洁

//用户操作导致show为true或者是false,来动态切换背景色
<div :class="show===true?'dark':'light'">
</div>
//css
:root{
--dark:#000,
--light:#fff
}
.dark{
    background:var(--dark)
}
.light{
   background:var(--light)
}