手寫筆不編譯數組項

我有以下.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

手寫筆不編譯數組項

回答

相關問題