PostCSS-每个循环通过列表

Question

我有＆＃34; postcss-each＆＃34;已安装，我想循环遍历无序列表并增加每个列表项的转换持续时间。

正确的语法是什么？循环是否在post-css内部，如果是这样的话？如果我将它放在li里面，每个循环都不会运行。我也试过使用$ i代替$（i）而没有运气。

我的帖子如下：

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进行算术运算。