I would like to add a CSS calc() function to my stylus code. The function has multiple variables as well as a mixin in it and I can't get the mixin to work properly. The mixin is supposed to remove any units inside my values:
strip-unit(value)
value / (value * 0 + 1)
Then I have tried to add the mixin to my CSS calc function using the sprintf function of stylus like so:
font-size "calc(%s + %s * ((50vw - %s) / %s))" % (foo strip-unit(bar - foo) foo2 strip-unit(foo2 - foo))
However I always end up with a CSS code like that (the units were not removed):
font-size: calc(12px + 15px * ((50vw - 320px) / 880px));
Instead of using the strip-unit mixin stylus comes with a built-in function unit() that can convert units. However if you leave the second parameter of the function empty it will remove the unit instead of replacing it. So all I needed to do was:
font-size "calc(%s + %s * ((50vw - %s) / %s))" % (foo unit(bar - foo,'') foo2 unit(foo2 - foo,''))