使变量值为负值

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

    

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

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

    

  在+或 - 时，检查双方是否具有相同的类型，或者一方是＆lt; number＆gt;另一个是＆lt; integer＆gt; 。如果双方都是同一类型，请解析为该类型。如果一方是＆lt; number＆gt;另一个是＆lt; integer＆gt;，解析为＆lt; number＆gt;。

       

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

<强>解决方案：

• 正如上面的答案和评论中已经提到的，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和说明。根据{{​​1}}只会变为-var(--skyve-bredde)这不是有效值，因此会导致 无效的属性值 错误。

- 50%

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

Answer 2

我还没有使用过这样的CSS变量，但逻辑上只是反转这个值应该有效：

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