如何在calc（）表达式中获取CSS变量的负值？

首先，让我向您展示我将如何在SCSS中执行此操作：

$submenu-padding-left: 1.5em;

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

这将编译为：

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

基本上，SCSS允许我将减号

-

与变量连接起来，以便将其转换为负值

---

使用CSS变量可以实现这一点吗？

是的，您可以做到。只需乘以

-1

：

：根目录{
--利润率：50像素；
}
身体{
利润率：0.100px；
边框：1px实心；
}
.框-1{
背景：红色；
高度：100px；
宽度：200px；
左边的保证金：计算（-1*var（-margin））；
}
.方框-2{
背景：绿色；
高度：100px；
宽度：200px；
左边距：计算（-1*（-1*var（--margin））；/*您也可以嵌套计算*/
}

---

如果多次需要负值，则可以定义新变量：

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

。但我更喜欢这样，因为可读性。

“如何在calc（）中将减号与CSS变量连接起来”正如您所看到的，这不是解决问题的正确方法。在calc（）表达式中从不连接任何内容。但是，您可以将var（）表达式连接到其他任何地方。@Temaniaf如果这是一个公平的观点，那么两个答案基本上是相同的-因为您先回答了，我又将您的答案标记为已接受的答案。哇，超级骇客-奇怪的是，这应该是必需的。