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

小编典典

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

css

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

$submenu-padding-left: 1.5em;

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

可以编译为：

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

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

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

阅读 2506

2020-05-16

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

2020-05-16