这篇文章主要讲解了“CSS变量的使用问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS变量的使用问题怎么解决”吧！

目前创新互联已为成百上千的企业提供了网站建设、域名、网站空间、网站托管、服务器托管、企业网站设计、罗田网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

1. 小心 !important

与 CSS 变量一起使用 !important 有点诡异，如下面的示范：

p {
  --color:red !important;

  color:var(--color);
  color:blue;
}

上面的 p 元素会是什么颜色呢？你会认为是 red 红色吧，认为按如下代码执行：

p {
  color: red !important;
  color: blue;
}

但是，并不是 red 红色，因为实际执行是这样：

p {
  color: red;
  color: blue;
}

在这种情况下，!important 并不是 color 的一部分，而是增加了 --color 变量的特性。规范中指明：

注意：自定义属性可以包含 !important ，但是会被 CSS 解析器自动从属性中删除，这将自定义的属性 important 变成层级。换言之， !important 并不是不会起作用，而是在语法检查之前就被忽略了。

下面这个例子你会更容易明白：

p {
  --color: red !important;
  --color: blue;
  
  color: var(--color);
}

上面的代码会赋予 p 元素红色，解析如下：

• 我们对 --color 属性有两次的声明，所以我们需要解决其层级的问题。第一次的定义带有 !important ，所以它的层级相对高

• 接着 var(--color) 将会应用 red !important

• 所以我们会得到 color: red

再来看一段代码：

p{
  --color: red !important;
  --color: blue; 

  color:var(--color);  color: pink; 
}

按照上面的逻辑，我们最后会得到粉红色 pink 的段落颜色。

一个很重要的规则是应当将 CSS 变量（自定义属性）看作普通属性，而不仅仅是存储值的变量。

自定义属性是普通属性，所以它们可以被定义在任何的元素上，可以使用普通属性的继承和联级规则解决，可以使用 @media 和其他条件规则进行条件处理，可以用于 HTML 的 style 属性，可使用 CSSDOM 读取和设置等等。

2. 它们不可以存储 urls

总有一天你会偶然发现这个常见的限制。

你不能这样做 ❌

: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() 是怎么解析的。解析起来有点棘手，推荐你到 Stack Overflow Answer 上找答案。正如你所见，我们修复起来很容易，把 url() 整个赋予变量即可。

3. 它们可以无效的值变有效

这也是我喜欢的点之一，也是让人头疼的点。

我们以一个基础的案例入手：

.box {
  background: red;
  background: linaer-gradient(red, blue);
}

.box 元素将会有一个红蓝渐变的效果，对吧？然而却是纯红色。嗯，我打错了 linear-*。我可以很容易发现这个错误，因为浏览器划掉了这一行并启用了上一行的背景样式。

现在，让我们来介绍变量：

.box {
  --color:red;
  background: var(--color);
  background: linaer-gradient(var(--color), blue);
}

测试这段代码，你会发现背景颜色变成了透明。我们的第二个背景颜色并没有被浏览器划掉，反而是第一个背景样式被划掉了。因为第二个背景样式重写了第一个。

为什么会发生这样的事情 ？

当我们使用变量作为属性，浏览器只会在 "计算值时间" 去评估值，因为我们需要首先知道变量的内容。在这种例子中，当浏览器做联级时，会认为属性值是有效的，之后才会变成无效。

在我们的例子中，浏览器做级联时，认为最后一个声明是有效的。但是到评估值的时候，最后一个声明被认定是无效的，所以它被忽略。我们不会回头查看，因为我们在级联的时候已经处理过了，所以我们最后会得到一个透明的背景颜色。

你可能认为这种行为不符合逻辑的，但是它确符合逻辑。因为一个值是有效还是无效时基于 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 值

我们考虑下面的例子：