Open axelson opened 8 years ago
I haven't tried this, but you might be able to use postcss-calc
and do:
left: calc(button-size * -1);
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.
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.
You can achieve that with CSS variables:
:root {
--button-size: 55px;
}
.someclass {
position: absolute;
left: calc(-1 * var(--button-size));
}
You can achieve that with CSS variables:
:root { --button-size: 55px; } .someclass { position: absolute; left: calc(-1 * var(--button-size)); }
Thank you so much!!!
left: calc(- var(--button-size));
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.
just leaving something that can help anyone
transform: translateX(calc(-1 * calc(var(--sidebar-width) - var(--sidebar-collapsed-width))));
this works for me :)
@apacsa really nice trick ;-)
So if I have:
Can I do something like: