Skip to content

Instantly share code, notes, and snippets.

@cimmanon
Last active August 29, 2015 14:07
Show Gist options
  • Save cimmanon/0b0c4793f58bc457c148 to your computer and use it in GitHub Desktop.
Save cimmanon/0b0c4793f58bc457c148 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<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>
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
.bullets {
$icon-bullet-size: 3.5em;
$colors:
desaturate(blue, 30),
desaturate(green, 10),
desaturate(yellow, 30),
desaturate(red, 30),
desaturate(goldenrod, 30);
padding: 2em;
overflow: auto;
text-align: center;
@for $i from 1 to length($colors) {
li:nth-of-type(#{$i}) h2 {
$color-from-list: nth($colors, $i);
color: $color-from-list;
}
}
}
.bullets {
padding: 2em;
overflow: auto;
text-align: center;
}
.bullets li:nth-of-type(1) h2 {
color: #2626d9;
}
.bullets li:nth-of-type(2) h2 {
color: #067a06;
}
.bullets li:nth-of-type(3) h2 {
color: #d9d926;
}
.bullets li:nth-of-type(4) h2 {
color: #d92626;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment