Stylus如何实现参数化变换？ul下li轮状排列需求求解

嘿，我明白你遇到的问题了——Stylus对单位运算的语法有特定要求，你之前的写法里用大括号包裹表达式、错误拼接单位的方式导致了解析报错。下面给你讲清楚正确的写法和原因：

错误根源 #

你之前尝试的{360/i}或者{360/i + 'deg'}写法是不对的：

• Stylus在属性值中可以直接写算术表达式，不需要用大括号包裹
• 角度计算需要保留deg单位的运算，直接用数值+字符串拼接的方式会让Stylus无法识别为合法的单位值

正确写法1：直接计算每个li的旋转角度 #

如果每个li需要旋转的角度是360°/N * 序号，可以这样写：

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

这里360deg / n会先算出每个li的步长角度，再乘以当前序号i，Stylus能正确解析单位运算，生成对应的CSS。

正确写法2：累计旋转角度（适合逐步叠加的场景） #

如果你想用累计变量来记录旋转角度，应该先算出步长，再逐步累加：

n = 8
rotation_step = 360deg / n
current_rotation = 0deg

for i in 1..n
  li:nth-child({i})
    transform rotate(current_rotation)
  current_rotation += rotation_step

这种方式先定义好每个li需要增加的角度步长，然后循环里每次给当前li应用旋转角度，再累加步长，语法完全符合Stylus的解析规则。

额外提示 #

Stylus支持原生的单位运算，比如100px + 20px、360deg / 8这类写法都能被正确解析，不需要手动拼接字符串或者用大括号包裹表达式，这是它和一些模板语言的区别哦～

内容的提问来源于stack exchange，提问作者Jeremy Thille