一、简介
CSS 变量是一个很不错的特性，目前已被广泛使用，例如 Bootstrap。本文中，我将讨论一些并不常见的用法或者注意事项。
二、示例
2.1 小心 !important
在 CSS 变量中使用 !important 得注意，我们先看一个基本示例：
p {
--color: red !important;
color: var(--color);
color: blue;
}p 会是什么颜色？你可能认为是红色，理所当然认为其等效于如下代码：
p {
color: red !important;
color: blue;
}但事实并非如此！p 的颜色是蓝色，因为我们将得到以下内容：
p {
color: red;
color: blue;
}这里 !important 不是颜色值的一部分，而是用于描述 --color。
注意：自定义属性末尾可以跟随
!important，但是会被 CSS 解析器自动从属性值中移除，而将自定义属性声明为important。
下面是一个加深理解的例子：
p {
--color: red !important;
--color: blue;
color: var(--color);
}以上代码最终的颜色值为红色：
- 我们声明了两个变量
--color，但是第一个有!important，所以优先级更高； - 然后
!important被移除，red被应用到color； - 最终得到
color: red。
一条重要的规则是始终将 CSS 变量（自定义属性）看做普通属性，而不是存储值的变量。
2.2 不能存储 URL
不能这样做：
:root {
--url: "https://picsum.photos/id/1/200/300";
}
.box {
background: url(var(--url));
} 应该这样做：
:root {
--url: url("https://picsum.photos/id/1/200/300");
}
.box {
background: var(--url);
} 问题的关键在于 url() 是如何被解析的。解决办法也很简单，始终在 CSS 变量中添加 url()。
2.3 让无效值变得有效
我们来看一个示例：
.box {
background: red;
background: linaer-gradient(red, blue);
}上述代码会得到红色背景，而不是渐变色，注意这里有一个拼写错误，我们将 linear 错写为 linaer。
然后我们引入一个变量：
.box {
--color: red;
background: var(--color);
background: linaer-gradient(var(--color), blue);
}现在背景色是透明色。第二个声明不再是无效的了，而是一个有效值。你甚至会注意到第一个声明是无效的，因为第二个覆盖了它。
2.4 可以不带单位
:root {
--p: 10px;
}
.box {
padding: var(--p);
}也可以这样写：
:root {
--p: 10;
}
.box {
padding: calc(var(--p) * 1px);
}2.5 可以被用于动画
一般来说，CSS 变量被定义为非动画属性。多亏了 @property 我们可以使用 CSS 变量来做动画（animation 和 transition）。
2.6 不能存储 inherit 值
看看如下代码：
<div class="box">
<div class="item"></div>
</div>.box {
border: 2px solid red;
}
.item {
--b: inherit;
border: var(--b);
}凭直觉，我们可能认为 .item 会继承其父元素的边框，因为 --b 包含 inherit，但实际上并不是这样。
一个解决方案是将 inherit 用作 var() 的第二个参数，作为回退值。
.item {
border: var(--b, inherit);
}2.7 可以为空
变量值可以为空：
.box {
--color: ;
background: var(--color);
}值必须包含一个字符，包括空格。
2.8 CSS 变量不是 C++ 变量
2.9 仅父子元素有效
记住这条黄金准则：CSS 变量总是从父元素（或祖先元素）传递到子元素。不会从子元素传递到父元素或者在兄弟元素之间传递。
2.10 奇怪的语法
body {
--: red;
background: var(--);
}CSS 变量可以只使用两个中横线。
包括下面的写法也是合法的：
body {
--📕: red;
--📗: green;
--📘: blue;
--📙: orange;
}没错，emojis 也是合法的。
CSS 变量语法允许使用一切值，只需要以 -- 开头。
