Использование @for в Sass для применения списка цветов к элементам того же типа

Question

Я использую Bourbon, Neat и Bitters для этого проекта, и я получаю кучу кода от Refills.

У меня есть список цветов, которые мне нужно применить к 6 различным элементам h2 соответственно.

Я успешно сделал это аналогичным образом в другом месте проекта, но мне трудно перевести его здесь.

Все, что я пробовал, привело к тому, что только первый цвет применяется ко всем элементам h2. Если я добавлю число после $ i в nth, например nth($colors, $i+1), он применит второй цвет в списке ко всем из них.

Как ни странно, вывод CSS правильный, но проблема, похоже, связана с nth-of-type, потому что появляется только nth-of-type(1).

Вот важная часть того, что я до сих пор:

.bullets { 
    $icon-bullet-size: 3.5em; 
    $colors: 
     desaturate($logo-blue, 30), 
     desaturate($logo-green, 10), 
     desaturate($logo-yellow, 30), 
     desaturate($badred, 30), 
     desaturate($goldenrod, 30); 

    padding: 2em; 
    overflow: auto; 
    margin-bottom: $base-line-height; 
    text-align: center; 


    h2 { 
    @for $i from 1 to length($colors) { 
     &:nth-of-type(#{$i}) { 
     $color-from-list: nth($colors, $i); 
     color: $color-from-list; 
     } 
    } 
    } 
} 

элементы h2 вкладываются пару глубоких уровней, как это:

<ul class="bullets"> 
<li class="bullet three-col-bullet"> 
    <div class="bullet-content"> 
    <h2>This needs to be one color</h2> 
    <p>some content</p> 
    </div> 
</li> 
<li class="bullet three-col-bullet"> 
    <div class="bullet-content"> 
    <h2>This is a second color</h2> 
    <p>content</p> 
    </div> 
</li> 
<li class="bullet three-col-bullet"> 
    <div class="bullet-content"> 
    <h2>Radisson Hotel Salt Lake City</h2> 
    <p>215 West South Temple<br> 
     $129 USD—standard room<br> 
     $139/$149 USD—triple/quad 
    </p> 
    </div> 
</li>  
</ul> 

И хороший пример того, что я m пытается выполнить can be found here

Я также ссылался на this post и пробовал предлагаемые решения.

Куда я иду не так? Спасибо за вашу помощь!

Answer 1

Ваша логика неверна. Селектор :nth-of-type(n) предназначен для элементов сиблинга. Ни один из ваших элементов h2 не является родным братом. Это элементы Li, которые являются братьями и сестрами, которых элементы h2 являются потомками:

@for $i from 1 to length($colors) { 
    li:nth-of-type(#{$i}) h2 { 
    $color-from-list: nth($colors, $i); 
    color: $color-from-list; 
    } 
} 

http://sassmeister.com/gist/0b0c4793f58bc457c148