手写笔不编译数组项

我有以下.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的验证码。我怎样才能得到想要的结果？

来源

2016-06-13 Vitaly

你确定你已经正确地提到你的变量名？它应该是'wid [i]'而不是'siz [i]'对吗？：D – Harry

我在创建问题时发生了错字，但.styl文件没有错别字，所以问题没有解决。 – Vitaly

好的，还有一个错误。这个错误不会被分类为拼写错误，所以我会以答案的形式发布。 – Harry

现在的问题是选择器不适用（适用于{}中的包装变量）。修改下面的代码，它应该可以正常工作。

另请注意，数组是基于零的，而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

来源

2016-06-13 14:01:32 Harry

谢谢。这工作很好 – Vitaly

手写笔不编译数组项

回答

相关问题