反转 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：

注意：因为 总是被解释为数字或 s, "unitless 0" s 在 calc() 中不受支持。那 是，宽度：计算（0 + 5px）；无效，即使两者都 width: 0;和 宽度：5px；是有效的。

: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）中测试了这两个示例。