如何將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%); 
    } 
}