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的算术。