Как зациклить массив SASS

Question

Может ли кто-нибудь объяснить правильный способ создания цикла цветов для следующих 100 или около того div?

У меня есть массив sass из 5 цветов, который я хотел бы применить в качестве цвета фона для каждого сообщения в цикле WordPress. Допустим, у меня есть 100 сообщений, как бы я неоднократно использовал каждый из 5 цветов в массиве цветов?

$red: #d20b21;
$pink: #ea4f76;
$yellow: #f7bb05;
$purple: #b81c56;
$orange: #e94f1a;

$colours: (
 red: $red,
 pink: $pink,
 yellow: $yellow,
 purple: $purple,
 orange: $orange,
);

.post{
  &:nth-of-type(1) {
 }
}

Answer 1

Помимо примечания: помните, что псевдо-селектор :nth-of-type работает только с элементами , а не с классами CSS.Пожалуйста, обратитесь к документации MDN по этой теме.

Ваша задача может быть решена довольно просто, если использовать :nth-child вместо:

$red: #d20b21;
$pink: #ea4f76;
$yellow: #f7bb05;
$purple: #b81c56;
$orange: #e94f1a;

$colours: (
 red: $red,
 pink: $pink,
 yellow: $yellow,
 purple: $purple,
 orange: $orange,
);

.post {
  $index: 0;
  @each $color in map-values($colours) {
    &:nth-child(#{length($colours)}n+#{$index}) {
      color: $color;
    }
    $index: $index + 1;
  }
}