如何获取CSS变量（也称为自定义属性）的负值？

Question

让我先演示一下如何在SCSS中完成这个操作：

$submenu-padding-left: 1.5em;

transform: translateX(calc(-#{$submenu-padding-left} + .5em));

这将编译为：

transform: translateX(calc(-1.5em - .5em))

基本上，SCSS 允许我将减号 - 与变量连接起来，以将其转换为负值。

使用 CSS 变量能否实现这一点？

- IOIIOOIO

---

如何将减号符号与CSS变量连接起来放入calc()函数中？正如您所看到的那样，这并不是解决问题的正确方法。在calc()表达式中，您永远不会连接任何东西。但是，在几乎所有其他地方，您都可以连接var()表达式。 - BoltClock

@TemaniAfif 这是一个公正的观点，两个答案基本上是一样的 - 因为你先回答了，所以我再次将你的答案标记为被接受的答案。 - IOIIOOIO

Answer 1

没问题，您可以这样做。只需乘以-1即可：

:root {
  --margin: 50px;
}

body {
  margin: 0 100px;
  border:1px solid;
}

.box-1 {
  background: red;
  height: 100px;
  width: 200px;
  margin-left: calc(-1 * var(--margin));
}

.box-2 {
  background: green;
  height: 100px;
  width: 200px;
  margin-left: calc(-1 * (-1 * var(--margin))); /* You can also nest calculation */
}

<div class="box-1">
</div>
<div class="box-2">
</div>

- Temani Afif

---

你是故意展示一个自我抵消的calc()例子吗？margin-left: calc(-1 * (-1 * var(--margin)));与margin-left: var(--margin);相同。也许margin-left: calc(2 * (-1 * var(--margin)));会更好地演示？ - Tim R

@TimR 我想要一个双重否定。 - Temani Afif

Answer 2

如果您需要多次使用负数值，则可以定义一个新变量：

:root {
  --margin: 50px;
  --margin--: calc(var(--margin) * -1);
 /* 
 while you may simply write like below
 but I love to use as above 
 coz, we'll only need to change value 
 in one place if needed
 */
 /* --margin--: -50px; */
}

.positive-margin {
  margin: var(--margin);
}
.negative-margin {
  margin-left: var(--margin--);
}

你可以使用--margin-或--negative-margin代替--margin--。但我更喜欢使用--margin--因为它更易读。

- Bhojendra Rauniyar

Answer 3

另一种可能的方法：

.negative-margin {
    margin-left: calc(0px - var(--margin));
}

- Stanislau Listratsenka