使变量值为负

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，+ 或 - 运算符前后必须有一个 space。

  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% ，这不是有效值，因此会导致 Invalid 属性 Value 错误。

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

<div>Some text</div>