for 루프의 경우 짝수 인 경우

Question

나는 매우 단순한 작업을 수행하려고 시도하고있어 보이지 않을 수 있으며, 그것은 나를 미치게 만듭니다. 숫자가 짝수인지 알려주고 변수를 하나씩 늘리려합니다. 세 번째를 얻을

@for $i from 1 through 6 { 
    $rgba-opacity:0.5; 
    &:nth-child(#{$i}) { 
     background: rgba($color-white-primary, $rgba-opacity); 
    } 
    @if #{$i} % 2 == 0 { 
     $rgba-opacity: $rgba-opacity+0.5; 
    } 
} 

가 기본적으로 내가 할 노력하고있어하는 아이 하나, 둘, 하나 개 색상 값을 얻을, 아이 셋, 넷 다른 얻고, 아이 다섯 여섯이 내가하려고했는데 무엇인가 . 왜 이것이 작동하지 않는지에 대한 아이디어가 있습니까? 어떤 도움을 주셔서 감사합니다.

Answer 1

전체 코드를 붙여 넣은 것으로 가정하면 코드를 으로 직접 지정합니다. Base-level rules cannot contain the parent-selector-referencing character '&'. 부모 선택자를 지정해야합니다.

$r : 100; 
$g : 120; 
$b : 140; 
$rgba-opacity:0.5; 

@for $i from 1 through 6 { 
    div { 
    &:nth-child(#{$i}) { 
    background: rgba($r, $g, $b, $rgba-opacity); 
    &:before { 
     content: ""+$i; 
    } 
    } 
    } 
    @if $i % 2 == 0 { //use $i for calculating mod here than #{$i} 
    $rgba-opacity: $rgba-opacity + 0.2; 
    $r: $r + 100; 
    $g: $g + 100; 
    } 
} 

HTML

<div class="block"></div> 
<div class="block"></div> 
<div class="block"></div> 
<div class="block"></div> 
<div class="block"></div> 
<div class="block"></div> 

출력 : 이것을 설명하는 시간을내어 너무 많은

Demo here