反转 CSS 变量的像素值

Question

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

失败：

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

作品：

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

问题：

第一次尝试明明是最多的eloquent，为什么还是不行呢？
有没有比第三种方法更eloquent的方法？

Answer 1

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

来自spec：

Note: Because <number-token>s are always interpreted as numbers or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid.

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

反转 CSS 变量的像素值

Inverting Pixel Value of CSS Variable

css

css-variables