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

PostCSS-每个循环列表

PostCSS-each Loop Through List

css

loops

postcss