Generated by SassMeister.com.
<div class="highlight-color__0099CE">
<h1>This is the title</h1>
</div>
<div class="highlight-color__C1167A">
<h1>This is the title</h1>
</div>
<div class="highlight-color__EB8F2D">
<h1>This is the title</h1>
</div>
<div class="highlight-color__39B54A">
<h1>This is the title</h1>
</div>
<div class="highlight-color__1B1464">
<h1>This is the title</h1>
</div>
<div class="highlight-color__6D13B0">
<h1>This is the title</h1>
</div>
.highlight-color__0099CE h1 {
background: #0099CE;
color: #fff;
}
.highlight-color__C1167A h1 {
background: #C1167A;
color: #fff;
}
.highlight-color__EB8F2D h1 {
background: #EB8F2D;
color: #fff;
}
.highlight-color__39B54A h1 {
background: #39B54A;
color: #fff;
}
.highlight-color__1B1464 h1 {
background: #1B1464;
color: #fff;
}
.highlight-color__6D13B0 h1 {
background: #6D13B0;
color: #fff;
}
// ----
// libsass (v3.2.5)
// ----
// Colors.
$brown: #70614F;
$white: #FFFFFF;
$blue: #0099CE;
$green: #39B54A;
$orange: #EB8F2D;
$pink: #C1167A;
$purple: #6D13B0;
$navy: #1B1464;
$black: #000000;
$gray: #6D6D6D;
$lt-gray: #A8A8A9;
$dk-brown: #2b2b2b;
$beige: #e7e5e3;
// Initiatives.
$arts: $blue;
$community: $pink;
$education: $orange;
$humanitarian: $green;
$nonprofit: $navy;
$partnerships: $purple;
// Highlight color.
@mixin highlight-color($initiative) {
$stringified: $initiative + unquote("");
$stripped: str-slice($stringified, 2);
.highlight-color__#{$stripped} & {
background: $initiative;
color: #fff;
}
}
@mixin highlight-colors() {
@include highlight-color($arts);
@include highlight-color($community);
@include highlight-color($education);
@include highlight-color($humanitarian);
@include highlight-color($nonprofit);
@include highlight-color($partnerships);
}
h1 {
@include highlight-colors();
}
<div class="highlight-color__0099CE">
<h1>This is the title</h1>
</div>
<div class="highlight-color__C1167A">
<h1>This is the title</h1>
</div>
<div class="highlight-color__EB8F2D">
<h1>This is the title</h1>
</div>
<div class="highlight-color__39B54A">
<h1>This is the title</h1>
</div>
<div class="highlight-color__1B1464">
<h1>This is the title</h1>
</div>
<div class="highlight-color__6D13B0">
<h1>This is the title</h1>
</div>