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不编译数组项

1 个答案: