第一

Question

我的问题是为什么CSS变量需要添加回退的概念，并且不像其他CSS属性那样依赖继承。

例如：

＆＃13;

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4);
}

＆＃13;

<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

＆＃13;

文本3最终变为红色而不是绿色或黄色。虽然级别上有有效属性，但它采用父颜色值，而不是验证同一级别上是否存在其他有效值。当变量名无效时会发生这种情况。

显然CSS变量有一个特殊的后备，所以你需要使用类似的东西：

color: var(--color4, yellow);

但这意味着再次重复颜色，因为

color: var(--color4, --color3);

不起作用。两者都不是：

color: var(--color3, yellow, blue);

或任何其他多个值。

此外，还不支持继承， currentColor ，初始等关键字。所以我不确定如何依赖在继承上，显然我需要对给定的值非常明确。在Firefox 57.0.1和Chrome 63上测试。

我知道CSS variables仍然是Working Draft所以也许这就是当前行为的原因。

Answer 1

第一

并非CSS中的所有属性都是继承的，请参阅这些链接，以便您可以看到继承了哪些CSS属性以及如何应用继承：

https://www.w3.org/TR/CSS22/propidx.html
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

第二

您声明重复属性的顺序非常重要。

如果您要应用的颜色为green，则不一样：

// correct way to declare fallback color, it will be green and yellow if --color3 was not defined
body span {
  --color3: green;
  color: yellow;
  color: var(--color3);
}

as：

body span { // incorrect way to declare fallback color
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4);
}

属性color: var(--color4);将被采用，因为此声明中没有无效语法，但由于没有声明为--color4的变量，因此将应用继承的颜色（在这种情况下，来自{ {1}} ）

因为body { color: var(--color1) } is a inherited property

第三

将回退与color一起使用是另一种解决方案，但前一个解决方案是不支持var()

的旧版浏览器的后备

此外，您使用错误，使用var()后备的正确方法应为：

var()

或者这个：

color: var(--color4, var(--color3));

color: var(--color4, var(--color3, yellow));只接受2个参数，即您要使用的值和回退请参阅following link

中有关如何使用它的语法

结论

由于var()并非在所有尚未的浏览器中都可用，因此使用重复的属性是正确的方式，我可以使用它，或者你可以同时使用它们。

＆＃13;

var()

＆＃13;

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: yellow;
  color: var(--color4, var(--color3));
}

＆＃13;

Answer 2

正如JoseAPL所说，var()表达式接受回退参数而不是默认为继承的原因仅仅是因为自定义属性执行继承，而不是所有标准属性都将使用他们一起做。

另一方面，如果你问为什么var()表达式没有默认为下一个最佳级联值，那是因为在评估var()表达式时，有没有其他值可以回退到，因为级联中的所有其他声明都已被删除。参见3.1节，它定义了术语invalid at computed-value time：

注意：存在计算值时间概念的无效因为变量不能像其他语法错误一样“早期失败”，所以当用户代理实现属性值无效时，它已经被抛弃了其他级联值。

话虽如此，你可以提供一个自定义属性作为后备值（只要它是not the same one，出于上面解释的相同原因） - 自定义属性只需要出现在它自己的var()表达式中，因为回退值是声明值，而不是属性名称。

结果是var()嵌套在另一个var()：

中

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4, var(--color3));
}

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4, var(--color3));
}

<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

CSS变量继承和后备

2 个答案:

第一

第二

第三

结论