CSS Variables - How to concatenate a minus symbol with CSS Variable in a calc()

Question

Hi so 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-l: 50px;
}

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

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

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

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