结合 CSS 变量和 calc()

Question

我想结合 CSS 变量和 calc()，但就像之前在这个线程中提到的那样（没有精确的答案），如果你做以下事情似乎有问题：

--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>