css - 使变量值为负

Question

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

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

该值将用于 right 和 width 属性。感谢您提供任何帮助，谢谢。

Answer 1

问题代码无法运行的原因:(引用文本中的所有强调都是我的)

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

上面的方法行不通有两个原因，它们如下:

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

  In addition, white space is required on both sides of the + and - operators. (The * and / operaters can be used without white space around them.)

• 根据 Type Checking for CSS calc , 0 是 <number>而另一个值是 <percentage> .对于 width 这样的属性, left , right等等，<percentage>需要 <length>类型，因此下面的检查将失败(因为值不是同一类型)，因此表达式将被视为无效。

  At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.

  If an operator does not pass the above checks, the expression is invalid.

---

解决方案:

• 如上述回答和评论中所述，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%这不是有效值，因此会导致无效属性值错误。

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

<div>Some text</div>