结合 CSS 变量和 calc()

【问题标题】：Combine CSS-variables and calc()结合 CSS 变量和 calc()
【发布时间】：2019-01-07 05:45:37
【问题描述】：

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

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

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

注意：我不想使用预处理器（如 sess 或 lass），只使用原生 CSS。

所以我的问题是：你能以某种方式强制 calc() 函数在其结果用于 var(--result) 之前执行吗？

提前致谢！

【问题讨论】：

标签： css css-variables css-calc

【解决方案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>

【讨论】：