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

Z时代
2024-01-10
分类：问答

让我开始向您展示如何在SCSS中执行此操作：

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

可以编译为：

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

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

是否可以使用CSS变量来实现？

回答：

是的，你可以做到。只需乘以-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>