Is it possible to use the negative value of a variable?

[axelson]

So if I have:

@value button-size: 55px;

Can I do something like:

position: absolute;
left: -button-size;

[joshwnj]

I haven't tried this, but you might be able to use postcss-calc and do:

left: calc(button-size * -1);

[joshwnj]

Edited my above comment to remove the incorrect part :)

@axelson just did a quick try using calc as above, and it works. The only catch I found is you need to make sure the postcss-calc plugin runs after CSS Modules.

[axelson]

Thanks, although I would prefer a solution that doesn't require adding in another postcss plugin. For now I'm just using scss variables when I need to negate them.

[apacsa]

You can achieve that with CSS variables:

:root {
  --button-size: 55px;
}

.someclass {
  position: absolute;
  left: calc(-1 * var(--button-size));
}

[wilmer2000]

You can achieve that with CSS variables:

:root {
  --button-size: 55px;
}

.someclass {
  position: absolute;
  left: calc(-1 * var(--button-size));
}

Thank you so much!!!

[vmaksym]

left: calc(- var(--button-size));

[y0nd0]

Weird, this does not work.

does not work

--dash: 500;
stroke-dashoffset: calc(-var(--dash));
/* or */
stroke-dashoffset: calc(var(--dash) * -1);

works

stroke-dashoffset: -500;

also works (positive value / wrong direction)

stroke-dashoffset: var(--dash);

What's wrong?

Update: Ok I think it's because this value cannot be animated. (btw. it's in a keyframe animation) My solution is to create two variables. Positive and the negative one.

[brenndap]

just leaving something that can help anyone

transform: translateX(calc(-1 * calc(var(--sidebar-width) - var(--sidebar-collapsed-width))));

this works for me :)

[CreativeDive]

@apacsa really nice trick ;-)