CSS定制属性作为另一个的后备值，而不是固定（预定义）值

Question

CSS自定义属性在缺少变量的情况下允许回退值，因此，例如：

:root {
  --color1:red;
  --color2:blue;
}

body {
  background:var(--color1,gray);
  color:var(--foo,yellow);
}

将导致BODY具有红色背景色（因为--color1确实存在），但文本为黄色，因为--foo自定义属性不存在。

似乎也无法将CSS自定义属性也用作后备值，因此此代码：

body {
  background:var(--color1,gray);
  color:var(--foo,--color2);
}

不会产生blue文本，但是将使用默认的浏览器颜色，通常是黑色。

为什么这种行为？

Answer 1

仅使用var（）函数访问自定义属性或CSS变量。

使用var(--my-var, var(--my-background, pink))。

有关更多信息，请签出Custom property fallback values。