以編程方式嵌套sass的規則

Question

所以基本上我有一個顏色列表，我想要改變html中列表的邊框顏色，這取決於它在DOM中的深度。

這是我此刻的SASS：

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


.list { 
    border-color:nth($C-subList-borders,1); 
    .list { 
     border-color:nth($C-subList-borders,2); 
     .list { 
      border-color:nth($C-subList-borders,3); 
      .list { 
       border-color:nth($C-subList-borders,4); 
      } 
     } 
    } 
} 

產生這個CSS：

.list { border-color: green; } 
.list .list { border-color: red; } 
.list .list .list { border-color: blue; } 
.list .list .list .list { border-color: orange; } 

我想要做的是能夠做的是基於該.LIST規則關於我在$ colors變量中的顏色數量，而不是手動完成。我無法弄清楚如何。

我知道它將有一個@each或@for循環，但我無法弄清楚它的工作原理。我不確定這是否可能。

----- UPDATE：我自己的答案-----

由於這個問題被標記爲重複我不能張貼此作爲一個實際的答案，所以這將不得不做。感謝Hobbes隱藏你的答案。這給了我一個語法應該如何工作的想法。你在你的答案有一個多餘的@each雖然所以我寫了這個，而不是（雖然我會接受你的，因爲你的回答給了我靈感）

$colors: green red blue orange; 

$class: '.list'; 
$selector: $class; 

@for $i from 1 through length($colors) { 
    $color: nth($colors,$i); 
    #{$selector} { 
     border-color: $color; 
    } 
    $selector: $selector $class; 
} 

Answer 1

以下SASS代碼應該讓你的結果你後。 @each語句將遍歷每種顏色。 @for循環基於列表中顏色的索引，並將正確數量的.list附加到選擇器。

$colors: green red blue orange; 

@each $color in $colors { 
    $i: index($colors, $color); 
    @for $c from 1 through $i { 
     @if $c == 1 { 
      $selector: '.list'; 
     } @else { 
      $selector: $selector '.list'; 
     } 
    } 
    #{$selector} { 
     border-color: #{$color}; 
    } 
} 

SASS梅斯特：http://sassmeister.com/gist/106687cca4d2a8ce5fc4