css - How to use a Stylus variable in calc?

Question

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)

Answer 1

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

Answer 2

calc (または他の関数) で複数の変数(1 つだけでなく) を使用するには、使用したようにsprintfを使用しますが、タプルを使用します。

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

Stylusでの補間はサポートされて{}おり、他の種類の補間に使用されることに注意してください。式を囲むために使用され、識別子またはセレクターの一部になります。