css - 使变量值负

Question

我试图找出一种使变量为负数的方法。我尝试right: calc(0-var(--skyve-bredde));了一下它没有用。这是变量：

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

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

Answer 1

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

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

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

• 根据CSScalc()语法，+ 或 - 运算符前后必须有一个空格。

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

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

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

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

---

解决方案：

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

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

<div>Some text</div>

---

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

如果我对规范的理解是正确的，这将不起作用。请参阅示例 11 下的第二个代码块及其说明。根据这-var(--skyve-bredde)只会成为- 50%无效值，因此会导致无效的属性值错误。

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

<div>Some text</div>

Answer 2

我从来没有使用过这样的 CSS 变量，但从逻辑上讲，只要反转值就可以了：

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