关于 CSS 变量你不知道的事

一、简介

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);
}

以上代码最终的颜色值为红色：

1. 我们声明了两个变量 --color，但是第一个有 !important，所以优先级更高；

2. 然后 !important 被移除，red 被应用到 color；

3. 最终得到 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 变量语法允许使用一切值，只需要以 -- 开头。

原文链接：What no one told you about CSS Variables