关于 CSS 变量的一些你可能不了解的事！( 二 ) _生活百科

CSS 变量的，所以浏览器一开始时不能真正知道。
.box { --color:10px; /* a "valid" variable */ background: red; /* a "valid" declaration */ background:linear-gradient(var(--color),blue); /* a "valid" declaration that will override the first one */ /* The result is an "invalid" value ... */ }

如果一个属性包含一个或者更多的 var() 函数，而且这些函数都是语法有效的，必须假定整个属性的语法在解析时有效。当 var() 函数被替代后，在“计算值时间”才做语法检查。

简单来说：CSS 变量将属性的状态作为一个后备，知道我们对其进行评估值。当评估值之后，我们可以说它是有效的或者无效的了。如果它是无效的，那么久太晚了，因为我们不会再回头使用上一个。
4. 它们可以不被使用单位
大多数的教材或课程都会展示下面的代码给你：
:root { --p: 10px;}.box { padding: var(--p);}但是，你也可以这么做：
:root { --p: 10;}.box { padding: calc(var(--p)*1px);}变量中拥有单位并不是强制的。
5. 他们可以动起来
最初，CSS 变量被定义是没有动画属性的。

Animatable: no

但是，事情发生了变化，我们通过 @property 修饰，CSS 变量可以做一些动画或者渐变。这个特性目前浏览器支持比较低，但是也是时候了解下了。
6. 它们不可以存储 inherit 值
我们考虑下面的例子：
<div class="box"> <div class="item"></div></div>.box { border:2px solid red;}.item { --b:inherit; border:var(--b);}直觉告诉我们，.item 将会即成父元素的 border，因为 --b 包含 inherit，但是并不是。
正如我们在第1点上说到的，我们错误认为 CSS 变量会简单存储值，然后供我们往后使用，然而并不会。 CSS 变量（自定义的属性）是普通属性，所以 inherit 会被应用并不会存储值。
例子：
.box { --b:5px solid blue; /* we define the variable on the parent */}.item { --b:inherit; /* the child will inherit the same value so "5px solid blue"*/ border:var(--b); /* we will have "5px solid blue" */}正如你所看到的，公共属性应用，逻辑上才可以继承 inherit 。

上面的写法是鸡肋的，因为 CSS 变量默认是继承的。

7. 它们可以是空值
是的，你可以想下面这么做：
.box { --color: ; background:var(--color); }

笔记：<declatation-value> 声明值必须代表一个标记，所以变量空值需要有一个空格。比如 --foo: ; 是有效的，var(--foo) 将会返回一个空格。 --foo:; 是无效的。如下：

.box { --color:; ❌ background:var(--color); }

文章插图

这个小技巧可以配合预设特性实现一些想不到的效果。
一个例子你就会明白这个技巧：
.box { background: linear-gradient(blue,transparent) var(--color,red); # 没有发现--color，取默认值 red}<div class="box"> I will have `background:linear-gradient(blue,transparent) red;`</div><div class="box" style="--color:green"> I will have `background:linear-gradient(blue,transparent) green;`</div><div class="box" style="--color: ;"> I will have `background:linear-gradient(blue,transparent) ;`</div>

box

var(--color, red)

空值允许我们移除属性中 var() 声明，在一个复杂的值中使用 var() 作用挺大。
8. CSS 变量不是 C++ 变量
很不幸的是，很多开发者趋向于比较 CSS 变量和其他语言的变量，然后在他们逻辑上有一大堆的问题。正是这个原因，我都不想叫他们变量而是自定义属性，因为他们确实是属性。
很多人都想这么做：
:root { --p:5px; --p:calc(var(--p) + 1px); /* let's increment by 1px */}:root { --x: 5px; --y: 10px; /* let's do a variable switch */ --c: var(--y); --y: var(--x); --x: var(--c);}.box { --s: 10px; margin:var(--s); /* I want 10px of margin */ --s: 20px; padding:var(--s): /* then 20px of padding */}