n 번째 항목에 대한 Sass 루프

Question

각기 다른 배경색이 필요한 네 가지 목록 항목이 있습니다.

내가 $color로하지만 난 분명히 내가 :nth-of-type 1, 2, 3 또는 4를 사용하는 방법에 대해 이야기하고있는 <li> 지정해야하는 루프의 콘텐츠 블록에 그들을 통해 말대꾸 목록과 각 내 4 개 가지 색상 변수를 넣을 수 있습니다

루프의 각 단계마다 어느 것이 필요합니까? <li>을 지정하는 방법을 모르겠습니다.

아이디어가 있으십니까?

Answer 1

이 트릭을 수행해야합니다

$colors: (#000, #F00, #0F0, #00F); 
@for $i from 1 through length($colors) { 
    li:nth-of-type(#{$i}) { 
     background: nth($colors, $i); 
    } 
} 

그것은 생산을 :

li:nth-of-type(1) { 
    background: black; } 

li:nth-of-type(2) { 
    background: red; } 

li:nth-of-type(3) { 
    background: lime; } 

li:nth-of-type(4) { 
    background: blue; }