gpt4 book ai didi

CSS变量继承自同名

转载 作者:太空宇宙 更新时间:2023-11-04 01:12:55 25 4
gpt4 key购买 nike

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

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

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

最佳答案

循环引用的 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

关于CSS变量继承自同名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50861664/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com