CSS变量继承自同名

Question

我正在尝试继承一个名为 --border-radius 的变量，该变量使用相同的名称:

--border-radius: 0 0 var(--border-radius) var(--border-radius);

有没有一种方法可以在不重命名变量的情况下做到这一点？

Answer 1

循环引用的 CSS 变量在 CSS 的设计范围之外，并且会生成一个新的错误状态，我认为，“在计算值时无效”，W3 引用，https://www.w3.org/TR/css-variables-1/#invalid-at-computed-value-time

CSS 必须能够在评估值时解析该值，而循环引用不允许 CSS 的预先存在的行为起作用。然后 CSS 回退到该属性的初始值。

由于它在设计上处于 CSS 之外，如果唯一的方法是使用循环引用，则可以使用 javascript。但是，在您的情况下，为什么不只使用第二个变量呢？具有易于阅读的自上而下格式，并保持根据需要更改值的能力。

--border-radius-value: 0;
--border-radius-values: 0 0 var(--border-radius-value) var(--border-radius-value);

下面的链接仅用于提供附加信息，该链接并非旨在回答 stackoverflow 上的问题，因为在某些时候它可能会变得无效而无法回答问题，但可能有助于理解可能存在的所有错误状态带有 CSS 变量和预期的回退。

有关错误和回退的更多信息:来自 CSS 工作组的 Lea 在 10:10 的时间标记录制并发布在 youtube 上的谈话中讨论了这些问题。 https://youtu.be/UQRSaG1hQ20?t=10m10s