sass if even number in for loop

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

В вашем коде (при условии, что вы вставили полный код), вы используете &:nth-child(), который даст ошибку 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