Question

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

我有5种颜色的Sass阵列，我想将其用作WordPress循环中每个帖子的背景色。假设我有100个帖子，我将如何重复使用colors数组中的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 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;
  }
}

如何连续循环一个SASS数组

1 个答案: