如何将SASS换成第四个孩子的循环？

Question

我有一个div的循环，我想要说24个div的顺序如下：

red> orange> yellow> green> green> yellow> orange> red ...并重复。

因此，基本上它可以在8种颜色中工作，而4种颜色可以反转颜色。在网上搜索后，我发现这个代码可以完成前半部分的工作，但是我很难理解我将如何反转序列。

我知道你可以写......

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

不过，我认为有可能是写它比更短的方式吗？

HTML：

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
    <li>g</li> 
    <li>h</li> 
</ul> 

SCSS：

$colors: red, orange, yellow, green; 

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

继承人什么，我至今一demo，希望我想达到什么是有道理的，有人也许能解释我是如何走关于实现它？

在此先感谢！

Answer 1

你会很乐意与这样的解决方案：

$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%); 
    } 
} 

fiddle

Answer 2

这样做是让你列表中的最短路径恰好包含您想通过循环的值。举个简单的例子，用手写出来是最简单的方法。如果它是一个很长的列表，那么滚动您自己的列表反向函数并加入列表可能更可取。

@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%); 
    } 
} 

Answer 3

或者使用条件：

$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%); 
    } 
}