How can I get a negative value of a CSS variables in a calc() expression?

Question

Let me start by showing you how I would do this in SCSS:

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

which would compile to:

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

Basically SCSS allows me to concatenate a minus symbol - with a variable in order to convert it to a negative value.

Is it possible to achieve this with CSS Variables?

Answer 1

Yes you can do it. Simply multiply by -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>