Vitaly Vitaly - 5 months ago 14
CSS Question

Stylus doesn't compile array items

I have following .styl file:

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])


But Stylus doesn't compile this code because of ParseError. How can I get the desired result?

Answer

The problem now is with the selector as the proper interpolation syntax (of wrapping variables within {}) is not used. Modify the code like below and it should work fine.

Also note that the array's are zero based whereas the nth-child selectors are one based and so the array indexes should be used as 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

Comments