I'm using Bourbon, Neat, and Bitters for this project, and I'm getting a bunch of my code from Refills.
I have a list of colors that I need to apply to 6 different h2 elements respectively.
I have successfully done this in a similar fashion elsewhere in the project, but I'm having a hard time translating it here.
Everything I've tried has resulted in just the first color being applied to all h2 elements. If I add a number after the $i in nth, like nth($colors, $i+1)
, it will apply the second color in the list to all of them.
Oddly, the CSS output is correct but the problem seems to be something to do with nth-of-type
, because only the nth-of-type(1)
appears.
Here's the important part of what I have so far:
.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;
}
}
}
}
The h2 elements are nested a couple levels deep, like this:
<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>
And a good example of what I'm trying to accomplish can be found here
I've referenced this post as well and have tried the suggested solutions.
Where am I going wrong? Thanks for your help!