Html 如何在第4个第n个子循环上反转SASS？

我有一个div循环，我希望24个div的顺序如下：

红色>橙色>黄色>绿色>绿色>黄色>橙色>红色。。。然后重复

所以基本上它是8个色，4个色，然后反转它们的颜色。在网上搜索后，我发现这段代码完成了工作的前半部分，但我发现很难理解如何颠倒顺序

我意识到你可以写

$colors: red, orange, yellow, green, green, yellow, orange, red;

然而我认为可能有一种比这更短的写作方式

HTML:

以下是我到目前为止所拥有的一些东西，希望我想要实现的东西是有意义的，也许有人能解释我是如何实现它的

---

提前谢谢

您对这样的解决方案满意吗：

$colors: red, orange, yellow, green, green, yellow, orange, red;

@for $i from 1 through length($colors) {
    li:nth-child(#{length($colors)}n+#{$i}) {
        background: lighten(nth($colors, $i), 20%);
    }
}

---

您对这样的解决方案满意吗：

$colors: red, orange, yellow, green, green, yellow, orange, red;

@for $i from 1 through length($colors) {
    li:nth-child(#{length($colors)}n+#{$i}) {
        background: lighten(nth($colors, $i), 20%);
    }
}

---

最短的方法是让列表精确地包含要循环的值。举个简单的例子，手写出来是最短的方法。如果是一个很长的列表，那么滚动您自己的列表反转函数并加入列表可能更可取

@function list-reverse($xs) {
    $collector: ();

    @for $i from length($xs) through 1 {
        $collector: append($collector, nth($xs, $i));
    }
    @return $collector;
}

$colors: red, orange, yellow, green;
$color-list: join($colors, list-reverse($colors));

@for $i from 1 through length($color-list) {
  li:nth-child(#{length($color-list)}n+#{$i}) {
    background: lighten(nth($color-list, $i), 20%);
  }
}

---

最简单的方法是让列表中精确地包含要循环的值。举个简单的例子，手写出来是最短的方法。如果是一个很长的列表，那么滚动您自己的列表反转函数并加入列表可能更可取

@function list-reverse($xs) {
    $collector: ();

    @for $i from length($xs) through 1 {
        $collector: append($collector, nth($xs, $i));
    }
    @return $collector;
}

$colors: red, orange, yellow, green;
$color-list: join($colors, list-reverse($colors));

@for $i from 1 through length($color-list) {
  li:nth-child(#{length($color-list)}n+#{$i}) {
    background: lighten(nth($color-list, $i), 20%);
  }
}

或使用条件：

$colors: red, orange, yellow, green;
$n : 0;
@for $i from 1 through 2*length($colors) {
  @if $i > length($colors) {
    $n : $n - 1;
  } @else {
    $n : $i;
  }
  @if $i == length($colors)+1 { $n : $n+1;}

  li:nth-child(#{length($colors)}n+#{$i}) {
    background: lighten(nth($colors, $n), 20%);
  }
}

或使用条件：

$colors: red, orange, yellow, green;
$n : 0;
@for $i from 1 through 2*length($colors) {
  @if $i > length($colors) {
    $n : $n - 1;
  } @else {
    $n : $i;
  }
  @if $i == length($colors)+1 { $n : $n+1;}

  li:nth-child(#{length($colors)}n+#{$i}) {
    background: lighten(nth($colors, $n), 20%);
  }
}

---

谢谢你的回答，我已经想到了这一点，但我想也许有更好的写作方法？一个简短的版本？@user2498890在人们浪费时间给你错误问题的正确答案之前，最好在原始帖子中这样说……好的，当然谢谢你的建议，我会更新我的问题。谢谢你的回答，我已经想到了这个，但我想也许有更好的写作方式？一个简短的版本？@user2498890在人们浪费时间给你错误问题的正确答案之前，最好在原始帖子中这样说……好的，谢谢你的建议，我会更新我的问题。你好，谢谢你的回答，我只是想确认一下，你是说在我的情况下，像我在问题中所做的那样，用相反的颜色写会更好，还是说你建议的代码更好？我试图实现你的代码，但似乎无法使它工作。我不知道我错在哪里。“更好”在这里是主观的。避免重复有时会迫使您编写更多的代码。演示：您好，谢谢您的回答，所以我想确认一下，您是说在我的情况下，最好像我在问题中所做的那样，将颜色写反，还是说您建议的代码更好？我试图实现你的代码，但似乎无法使它工作。我不知道我错在哪里。“更好”在这里是主观的。避免重复有时会迫使您编写更多的代码。演示：谢谢你的回答，这非常有效。由于不熟悉SASS的条件，您介意发表评论来帮助我完全理解代码在做什么吗？我也把它放在这个JSFIDLE中来测试它是否有效-好的，我刚刚注意到它在前8个版本中有效，但之后就不再继续了。您知道为什么会这样吗？谢谢您的回答，这已经非常有效了。由于不熟悉SASS的条件，您介意发表评论来帮助我完全理解代码在做什么吗？我也将其放在这个JSFIDLE中测试它是否工作-好的，我注意到它在前8个版本中工作，但之后就不再继续这个序列了。您知道为什么会这样吗？