我对使用 calc() 设置 CSS 变量的行为感到好奇。
Example:
#test {
--halfWidth: calc(100% / 2);
}
现在，如果#test元素，比如说div，宽 500px，我想要--halfWidth变量设置为 250px。
但是，据我所知var(--halfWidth)其他地方使用的代码只需放入calc(100% / 2)字符串而不是250px。这意味着我不能使用元素 A 的计算并稍后在元素 B 中使用它，因为它只是简单地设置例如width: var(--halfWidth);作为元素 B 宽度的一半，而不是定义变量的元素 A 宽度的一半。
我在网络上搜寻，试图找到有关此行为的任何文档，但到目前为止我一无所获。
理想情况下，使用 calc 设置 CSS 变量应该有两种变体：
- 一种变体的工作方式与此示例类似，只需按原样放入字符串，禁止任何字符串内变量替换。
- 第二种变体，其中 calc() 将产生计算结果，而不是简单地替换字符串。
如何实现这一目标？我宁愿将实际的实现留给适合它的人，但一种可能性是eval()之类的事情;喜欢eval(calc(100% / 2))会给出结果250px.
无论如何，如果有人有关于此行为的任何真实文档或如何让上面的示例产生结果的解决方案，我洗耳恭听！
编辑：仅供参考，我已阅读规格https://drafts.csswg.org/css-variables/ https://drafts.csswg.org/css-variables/
这是一个很难回答的问题，因为答案不会是：
这样做...然后它就会起作用
您面临的问题是 CSS 的正常行为。它层叠了样式。如果你想要实现的目标能够实现，那么短时间内它就会变得非常混乱。
我的意思是你可以定义这样的变量是多么酷
#test {
--halfWidth: calc(100% / 2);
}
where var(--halfWidth)应该永远是calc(100% / 2)。您是否注意到它始终是父元素宽度的一半？
想象一下，如果一个程序员在几个月内阅读了你的代码并得到了宽度为1000px设置为--halfWidth现在是250px宽......我认为互联网坏了:)它应该只是500px wide.
为了实现你想要的，你可以/应该定义不同的vars 定义父元素的宽度。并将其分给孩子们。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
