反转CSS变量的像素值

Question

我正在使用CSS变量，以便可以轻松进行全面更改。我的变量之一是--gap: 15px，到目前为止，我已经使用了大约15次。但是，我现在需要使用--gap的倒数值，即-15px。

失败：

1. calc(0 - var(--gap))
2. calc(var(--gap) * -1)

作品：

1. calc(var(--gap) - calc(var(--gap) * 2))

问题：

• 第一次尝试显然是最有说服力的，但是为什么不起作用？

• 有没有一种方法可以比第三种方法更雄辩？

Answer 1

如果我在计算的0部分中添加单位，那么您的第一个失败示例对我有用。

来自spec：

  

注意：因为始终被解释为数字或   calc（）不支持 s，“无单位0” s。那   是，宽度：calc（0 + 5px）;无效，即使两个宽度都为0；和   宽度：5像素；有效。

:root {
  --gap: 15px;
}

div {
  margin-top: calc(0px - var(--gap));
}

<div>text</div>

您的第二个失败示例对我有用。

:root {
  --gap: 15px;
}

div {
  margin-top: calc(var(--gap) * -1);
}

<div>text</div>

我在Firefox 64，Chrome 71和Safari 12（全部为Mac）中测试了这两个示例。