Using negative CSS Custom Properties [duplicate]

Question

In preprocessors, like SASS, you can use negative values like:

$margin-md: 10px;  .class {   margin-bottom: -$margin-md; } 

How do I do this using custom properties?

// This doesn't work .class {   margin-bottom: -var(--margin-md); } 

Answer 1

As of this posting, March 2018, the only way to use negative custom properties is by multiplying it by -1 with the calc function.

// Vanilla CSS .class {   margin-bottom: calc(var(--margin-md) * -1); } 

If you're using a preprocessor with custom properties, you'll need to escape the custom property within the calc function.

// SASS .class {   margin-bottom: calc(#{var(--margin-md)} * -1); }