css - 结合 CSS 变量和 calc()

Question

我想结合 CSS 变量和 calc()，但就像 this thread 中提到的那样之前(没有确切答案)如果您执行以下操作，似乎会出现问题:

--a: 1;
--b: 2; 
--result: calc(var(--a) + var(--b));

这个例子的输出当然应该是 3，但是如果你使用 var(--result) 它只有值 var(calc(1 + 2))。

注:我不想使用预处理器(如 sess 或 lass)，只想使用原生 CSS。

所以我的问题是:在 var(--result) 中使用结果之前，您能以某种方式强制执行 calc() 函数吗？

提前致谢!

Answer 1

CSS 不是 C++，所以这些不是按顺序执行的指令，这些是 CSS 声明。
--result等于 calc(var(--a) + var(--b))只有当您使用该变量时，浏览器才会进行最终计算，因为 --a和 --b可能会根据元素而变化，这样说 --result应该等于 3是假的。

下面是一个例子来说明这一点:

.box {
  --a: 1;
  --b: 2;
  --result: calc(var(--a) + var(--b));
  height: calc(var(--result) * 10px);
  border: 1px solid;
}

.alt {
  --a: 2;
}

<div class="box">
 my height is equal to 30px because result is evaluated to 3 (1+2)
</div>

<div class="box alt">
 my height is equal to 40px because result is evaluated to 4 (2+2)
</div>