css - 反转 CSS 变量的像素值

Question

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

失败：

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

作品：

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

问题：

• 第一次尝试显然是最有说服力的，但为什么行不通呢？

• 有没有比第三种方式更有说服力的方法来实现这一点？

标签： csscss-variables

Answer 1

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

从规格：

注意：因为 <number-token> 总是被解释为数字或 <integer>，所以 calc() 不支持“无单位 0”<length>。即width: 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）中测试了这两个示例。