PostCSS-每個循環列表

Question

我有「postcss-每個」安裝，我想通過無序列表循環，並增加每個列表項的過渡時間。

什麼是正確的語法？循環進入後CSS，如果是的話在哪裏？如果我把它放在裏面，每個循環都不會運行。我也嘗試過使用$ i而不是$（i）而沒有運氣。

我postcss低於：提前

ul { 
    &.show-list { 
    li { 
     opacity: 1; 
    } 
    } 
    @each $i in li { 
    &:nth-child($(i)) { 
     transition-delay: (0.2s * $(i)); 
    } 
    } 
    li { 
    opacity: 0; 
    } 
} 

謝謝！

Answer 1

不幸的是，postcss-each（和一般的PostCSS）對你的DOM一無所知。它不應該。您可以使用唯一的解決方法是這樣的：

@each $i in 1, 2, 3, 4, 5 { 
    &:nth-child($(i)) { 
    transition-delay: (0.2s * $(i)); 
    } 
} 

請注意，您還可以選擇使用postcss-calc的算術。