css - Stylus - 如何实现参数化变换？

Question

我有一个 ul，里面有 N 个 li。我想将每个 li 旋转 360/N 度，以便它们形成一个轮子。

Codepen

我在 Stylus 中尝试了很多语法来实现这一点，但我总是得到同样的错误:

expected "ident" or "string", got "unit 360"

例如:

n=8
for i in (1..n)
    li:nth-child({i})
        transform rotate( {360/i}deg ) // expected "ident" or "string", got "unit 360"

或

n=8
for i in (1..n)
    li:nth-child({i})
        transform rotate( {360/i + 'deg'} ) // expected "ident" or "string", got "unit 360"

或

n=8
rotation = 0deg
for i in (1..n)
    li:nth-child({i})
        transform rotate( rotation )
    rotation = rotation + {360/i} + "deg" // expected "ident" or "string", got "unit 360"

或

n=8
rotation = 0deg
for i in (1..n)
    li:nth-child({i})
        transform rotate( rotation )
    rotation += {360/i + "deg"} // expected "ident" or "string", got "unit 360"

有人知道正确的语法吗？

Answer 1

更简单:

n=8
for i in (1..n)
    li:nth-child({i})
        transform rotate(360/i deg)