csscss-variablescss-calc

How can I get a negative value of CSS variables (aka Custom Properties)


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?


Solution

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