css - PostCSS-每个循环列表

Question

我安装了“postcss-each”，我想遍历一个无序列表并增加每个列表项的过渡持续时间。

正确的语法是什么？循环是否进入 post-css 内部，如果是，在哪里？如果我将它放在 li 中，每个循环也不会运行。我也尝试过使用 $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用于算术。