How to use a Stylus variable in calc?

CssStylusCss Calc

Css Problem Overview


In Stylus, how do I use a variable in a calc expression?

For example, the following doesn't work (arrow-size being a variable):

arrow-size = 5px
left calc(50% - arrow-size)

Css Solutions


Solution 1 - Css

In order to use a Stylus variable inside a calc expression, one must employ the string % operator:

arrow-size = 5px
left "calc(50% - %s)" % arrow-size

Solution 2 - Css

To use multiple variables (not just one) in calc (or with other functions), i use sprintf as you used, but with tuples:

arrow-size = 5px
measure = 50%
left "calc(%s - %s)" % (measure arrow-size)

Remember that interpolation in Stylus is supported through {} and it's used for other kind of interpolation. It's used to surround an expression, which then becomes part of a identifier, or a selector.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionaknuds1View Question on Stackoverflow
Solution 1 - Cssaknuds1View Answer on Stackoverflow
Solution 2 - CssFacundo VictorView Answer on Stackoverflow