Stylus 不编译数组项

Question

我有以下 .styl 文件：

li
  background-color: rgba(#fff, .3)

  siz = 10px 70px 30px 50px 60px 20px 90px 25px 40px 30px
  deg = 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg
  pos = 50px 120px 150px 170px 220px 250px 270px 320px 370px 420px

  for i in (1..10)
    &:nth-child(i)
      width: siz[i]
      height: siz[i]
      left: pos[i]
      transform: translateY(100px) rotate(deg[i])

但由于 ParseError，Stylus 无法编译此代码。我怎样才能得到想要的结果？

Answer 1

现在的问题是选择器没有使用正确的插值语法（在 {} 内包装变量）。像下面这样修改代码，它应该可以正常工作。

另请注意，数组是从零开始的，而 nth-child 选择器是从一开始的，因此数组索引应用作 i - 1。

li
  background-color: rgba(#000, .3) /* changed color just for the demo */

  siz = 10px 70px 30px 50px 60px 20px 90px 25px 40px 30px
  deg = 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg 45deg
  pos = 50px 120px 150px 170px 220px 250px 270px 320px 370px 420px

  for i in (1..10)
    &:nth-child({i}) /* note the change here */
      width: siz[i - 1] /* note the change to index */
      height: siz[i - 1] /* note the change to index */
      left: pos[i - 1] /* note the change to index */
      transform: translateY(100px) rotate(deg[i - 1]) /* note the change to index */

CodePen Demo

Stylus 不编译数组项

Stylus doesn't compile array items

css

stylus