使变量值为负值

Question

我试图弄清楚一种变量为负的方法.我试过right: calc(0-var(--skyve-bredde));它不起作用.这是变量:

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

该值将用于right和width属性.感谢任何帮助,谢谢.

Answer 1

有问题的代码不起作用的原因:(引用文本中的所有重点都是我的)

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

以上原因不会有两个原因,它们如下:

• 根据CSS calc()语法,在+或 - 运算符之前和之后必须有一个空格.

  此外,+和 - 运算符的两侧都需要空格.(*和/操作符可以在它们周围没有空格的情况下使用.)

• 根据类型检查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))应该工作.

: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>