Search code examples
cssloopspostcss

PostCSS-each Loop Through List

I have "postcss-each" installed and I'd like to loop through an unordered list and increase the transition duration on each list-item.

What is the correct syntax? Does the loop go inside the post-css and if so where? The each loop does not run if I place it inside the li either. I've also tried using $i instead of $(i) with no luck.

My postcss is below:

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

Thanks in advance!

Solution

  • Unfortunately, postcss-each (and PostCSS in general) knows nothing about your DOM. And it shouldn't. The only workaround you can use looks like this:

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

    Please note that you also have to use postcss-calc for the arithmetic.