5

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

例如：

: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);
}
<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

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

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

color: var(--color4, yellow);

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

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

不起作用。既不是：

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

或任何其他多个值。

也不支持像inherit , currentColor , initial等关键字。所以我不确定如何依赖继承，因为显然我需要非常明确地使用给定的值。在 Firefox 57.0.1 和 Chrome 63 上测试。

我知道CSS 变量仍然是工作草案，所以也许这就是当前行为的原因。

4

2 回答 2

7

正如 JoseAPL 所说，var()表达式接受回退参数而不是默认继承的原因仅仅是因为虽然自定义属性确实继承，但并非所有您将使用它们的标准属性都这样做。

另一方面，如果您要问为什么var()表达式不默认为下一个最佳级联值，那是因为在var()计算表达式时，没有其他值可以回退到，因为在级联已被删除。请参阅第 3.1 节，其中定义了在计算值时间无效的术语：

注意：存在计算值时无效的概念是因为变量不能像其他语法错误那样“提前失败”，所以当用户代理意识到属性值无效时，它已经丢弃了其他级联值。

话虽如此，您可以提供一个自定义属性作为后备值（只要它不是同一个，出于上述相同的原因）——该自定义属性只需要出现在它自己的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>

于 2018-01-03T16:29:05.667 回答
5

第一的

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

作为： 

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

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

因为color 是继承财产


第三

使用后备var()是另一种解决方案，但前一个是不支持的旧浏览器的后备var()

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

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

或这个： 

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

var()只接受 2 个参数，您要使用的值和后备。在以下链接
中查看如何使用它的语法


结论

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

: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));
}
<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

于 2018-01-03T15:54:01.140 回答