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。

所以我的问题是：您能以某种方式强制执行calc（）函数，然后在var（-result）中使用它的结果吗？

谢谢！

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>

结合CSS变量和calc（）

1 个答案: