SASS 목록이 작동하지 않습니다.

Question

SASS 목록을 작동 시키려고하는데 문제가 있습니다. 여러분 중 제가 잘못하고있는 것을 안내하고 해결책을 보여줄 수 있습니까? 실제로 각 p 태그가 SASS 목록에 언급 된 색상 순서에 따라 색상을 갖고 싶어

p { 
    color: #02ce53; } 

p { 
    color: #05d297; } 

p { 
    color: #10cbc2; } 

p { 
    color: #e45042; } 

p { 
    color: #fe7e10; } 

p { 
    color: #01a2f0; } 

: 같은

$colors: #02ce53, #05d297, #10cbc2, #e45042, #fe7e10, #01a2f0 
@each $color in $colors 
    p 
     color: $color 

내 생성 된 CSS 보인다. 어떻게 가질 수 있습니까?

Answer 1

귀하가 @each 지시어 안에 index($list,$value)와 목록의 인덱스를 얻을 nth-child 인덱스로 사용할 수 있습니다 :

$colors: #02ce53, #05d297, #10cbc2, #e45042, #fe7e10, #01a2f0 

@each $color in $colors 
    p:nth-child(#{index($colors, $color)}) 
    color: $color 

이 당신에게 다음과 같은 제공 : 지금 노력하고 있습니다

p:nth-child(1) { 
    color: #02ce53; 
} 

p:nth-child(2) { 
    color: #05d297; 
} 

p:nth-child(3) { 
    color: #10cbc2; 
} 

p:nth-child(4) { 
    color: #e45042; 
} 

p:nth-child(5) { 
    color: #fe7e10; 
} 

p:nth-child(6) { 
    color: #01a2f0; 
}