如何正确地循环 SASS 数组

【问题标题】：How to loop a SASS array contectly如何正确地循环 SASS 数组
【发布时间】：2019-06-21 00:23:39
【问题描述】：

有人可以解释为接下来的 100 个左右的 div 循环颜色数组的正确方法吗？

我有一个 5 种颜色的 sass 数组，我想将其用作 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) {
 }
}

【问题讨论】：

标签： sass

【解决方案1】：

另外注意：请记住:nth-of-type 伪选择器仅适用于元素，不适用于 CSS 类。关于这个话题请参考MDN documentation。

改用: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;
  }
}

【讨论】：