css - 如何在 calc 中使用 Stylus 变量？

Question

在 Stylus 中，如何在calc表达式中使用变量？

例如，以下内容不起作用（arrow-size作为变量）：

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

Answer 1

为了在 calc 表达式中使用 Stylus 变量，必须使用字符串 % 运算符：

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

Answer 2

要在 calc （或与其他函数）中使用多个变量（不仅仅是一个），我使用sprintf，但使用元组：

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

请记住，Stylus中的插值{}是通过支持的，它用于其他类型的插值。它用于包围表达式，然后成为标识符或选择器的一部分。