muerwre.github.io/content/CSS/Sass nth-child iterate mixin.md
2022-11-03 10:38:11 +06:00

470 B

Say, we need to color n items by specific colors, which depend on its position. #SCSS supports iteration over lists for that purposes:

@mixin color-per-child($colors) {
  @each $color in $colors {
    &:nth-child(#{index(($colors), ($color))}) {
      color: $color;
    }
  }
}

Usage is simple:

.item {
  @include color_per_child((#ded187, #dbde87, #bade87, #9cde87, #87deaa));
}