Issue
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);
}
Solution
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 */
/* Using multiplication */
.class {
margin-bottom: calc(var(--margin-md) * -1);
}
/* Using Subtraction (from @GibsonFX comment) */
.class {
margin-bottom: calc(0 - var(--margin-md));
}
Subtraction works for the units that does not support multiplication
Answered By - bholtbholt
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.