Question

我很好奇在设置CSS变量时使用calc（）的行为。

示例：

#test {
    --halfWidth: calc(100% / 2);
}

现在，如果#test元素（比如div）宽度为500px，我希望将--halfWidth变量设置为250px。

但是，据我所知，其他地方使用的var(--halfWidth)代码只会放入calc(100% / 2)字符串而不是250px。这意味着我不能使用say元素A的计算并稍后在元素B中使用它，因为它只是将例如width: var(--halfWidth);设置为元素B的宽度的一半而不是宽度的一半元素A，其中定义了变量。

我已经在网上搜索试图查找有关此行为的任何文档，但到目前为止我已经画了一个空白。

理想情况下，使用calc设置CSS变量应该有两种变体：

一个变体就像这个例子一样工作，简单地按字符串放入字符串，禁止任何字符串中的变量替换。
第二个变体，其中calc（）将产生计算结果，而不是简单地替换字符串。

如何实现这一目标？我宁愿将实际的实现留给适合它的人，但有一种可能性是eval()类的东西;例如eval(calc(100% / 2))会给出结果250px。

无论如何，如果任何人有关于这种行为的任何真实文档，或者如何获得上述示例的解决方案而不是产生结果，我全都耳朵！

编辑：仅供参考，我已阅读https://drafts.csswg.org/css-variables/

Answer 1

这是一个回答的问题，因为答案不会是：

这样做......然后它会起作用

您面临的问题是CSS的正常行为。它级联风格。如果你想要实现的目标会在短时间内变得非常混乱。

我的意思是你可以定义一个像这样的变量

有多酷

#test {
    --halfWidth: calc(100% / 2);
}

其中var（ - halfWidth）应始终为calc(100% / 2)。您是否注意到它将始终是父元素宽度的一半？

想象一下，如果一个程序员在几个月内读取你的代码并且盒子的宽度为1000px并设置为--halfWidth并且现在宽度为250px，那会有多奇怪......我会想互联网坏了:)它应该是500px宽。

为了达到你想要的效果，你可以/应该定义不同的vars来定义父元素的宽度。并把它分给孩子们。

Answer 2

一种解决方法是在 CSS对象模型（ CSSOM ）中动态添加一行，以明确声明{{1}的width }类。

此.halfwidth随后将应用于所有带有width类的div。

在下面的示例中，我另外设置了.halfwidth的水平可调整大小，以便您可以更清楚地看到，当您更改.element-a的{{1}}时，{{1 }}和两者的width div均按比例变化，其中包括.element-a的子级width div。

工作示例：

.halfwidth

.halfwidth

.element-b

CSS变量

2 个答案: