使变量值为负

Question

我正在尝试找出一种使变量为负数的方法。 我尝试了right: calc(0-var(--skyve-bredde)); 位，但它不起作用。 这是变量：

#drawer, #burger{
    --skyve-lengde:50%;
}

该值将用于right 和width 属性。 任何帮助表示赞赏，谢谢。

Answer 1

我从未使用过这样的 CSS 变量，但从逻辑上讲，只需反转值即可：

right: calc(var(--skyve-bredde) * -1);

Answer 2

有问题的代码不起作用的原因：（引用文本中的所有重点都是我的）

right: calc(0-var(--skyve-bredde));

上述方法不起作用有两个原因，它们如下：

• 根据CSS calc() syntax，+ 或 - 运算符前后必须有一个空格。

  此外，+ 和 - 运算符两边都需要空格。 （可以使用 * 和 / 操作符，它们周围没有空格。）

• 根据Type Checking for CSS calc，0 是<number>，而另一个值是<percentage>。对于width、left、right 等属性，<percentage> 采用<length> 类型，因此下面的检查将失败（因为值的类型不同），因此表达式将为视为无效。

  在 + 或 - 处，检查两边是否具有相同的类型，或者一侧是 而另一侧是 。如果双方是同一类型，则解析为该类型。如果一侧是 而另一侧是 ，则解析为 。

  如果运算符没有通过上述检查，则表达式无效。

---

解决方案：

• 正如上述答案和评论中已经提到的，calc(var(--skyve-bredde) * -1) 将工作并产生预期的输出。
• 或交替在任一侧使用相同的类型，例如calc(0% - var(--skyve-bredde)) 也应该可以工作。

:root {
  --skyve-bredde: 50%;
}
div {
  position: absolute;
  right: calc(0% - var(--skyve-bredde));
  background: red;
}

<div>Some text</div>

---

在变量前加一个否定符号：

如果我对规范的理解正确，这将不起作用。请参阅second code block under Example 11 和说明。据此，-var(--skyve-bredde) 只会变为 - 50%，这不是一个有效值，因此会导致 Invalid Property Value 错误。

:root {
  --skyve-bredde: 50%;
}
div {
  position: absolute;
  right: -var(--skyve-bredde);
  background: red;
}

<div>Some text</div>