Menu
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); } 
484
The short answer is no, as long as you are only using negative CSS margins to bring elements closer together than their box model properties would allow.
Just to clarify for people finding this through Google: you can use CSS custom properties inside the scope of a media query, you just cannot use them in a media query declaration.
The @property “at-rule” in CSS allows you to declare the type of a custom property, as well its as initial value and whether it inherits or not.
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.
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); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With