Skip to content

Instantly share code, notes, and snippets.

@csswizardry
Last active August 29, 2015 14:14
Show Gist options
  • Save csswizardry/20b62018e8143bc7f3fc to your computer and use it in GitHub Desktop.
Save csswizardry/20b62018e8143bc7f3fc to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<!--
- Styled directly.
-->
<p class="u-color-world">Lorem ipsum dolor sit amet.</p>
<p class="u-color-politics">Lorem ipsum dolor sit amet.</p>
<p class="u-color-tech">Lorem ipsum dolor sit amet.</p>
<p class="u-color-entertainment">Lorem ipsum dolor sit amet.</p>
<p class="u-color-sport">Lorem ipsum dolor sit amet.</p>
<p class="u-color-weather">Lorem ipsum dolor sit amet.</p>
<hr />
<!--
- Styled via ‘current’ pointer.
-->
<div class="t-world">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-politics">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-tech">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-entertainment">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-sport">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-weather">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----
// Create a list of themes and their associated color.
// Here we have a made-up example of sections of a news site.
$themes: (
world: #ed1c24,
politics: #f7941d,
tech: #fff200,
entertainment: #00a651,
sport: #0054a6,
weather: #662d91,
);
// Create a list of different properties we might apply that color to.
$properties: (
null,
background-,
border-,
);
@each $theme, $color in $themes {
@each $property in $properties {
// Create an absolute class which always points to the specified theme.
// E.g. `.u-color-sport {}` is always #0054a6.
.u-color-#{$property}#{$theme},
// Create a variable-like class which always points to the ‘current’ color
// based on the currently invoked theme.
// E.g. `.u-color-current {}` will be the color of the current theme.
.t-#{$theme} .u-color-#{$property}current {
#{$property}color: $color;
}
}
}
.u-color-world,
.t-world .u-color-current {
color: #ed1c24;
}
.u-color-background-world,
.t-world .u-color-background-current {
background-color: #ed1c24;
}
.u-color-border-world,
.t-world .u-color-border-current {
border-color: #ed1c24;
}
.u-color-politics,
.t-politics .u-color-current {
color: #f7941d;
}
.u-color-background-politics,
.t-politics .u-color-background-current {
background-color: #f7941d;
}
.u-color-border-politics,
.t-politics .u-color-border-current {
border-color: #f7941d;
}
.u-color-tech,
.t-tech .u-color-current {
color: #fff200;
}
.u-color-background-tech,
.t-tech .u-color-background-current {
background-color: #fff200;
}
.u-color-border-tech,
.t-tech .u-color-border-current {
border-color: #fff200;
}
.u-color-entertainment,
.t-entertainment .u-color-current {
color: #00a651;
}
.u-color-background-entertainment,
.t-entertainment .u-color-background-current {
background-color: #00a651;
}
.u-color-border-entertainment,
.t-entertainment .u-color-border-current {
border-color: #00a651;
}
.u-color-sport,
.t-sport .u-color-current {
color: #0054a6;
}
.u-color-background-sport,
.t-sport .u-color-background-current {
background-color: #0054a6;
}
.u-color-border-sport,
.t-sport .u-color-border-current {
border-color: #0054a6;
}
.u-color-weather,
.t-weather .u-color-current {
color: #662d91;
}
.u-color-background-weather,
.t-weather .u-color-background-current {
background-color: #662d91;
}
.u-color-border-weather,
.t-weather .u-color-border-current {
border-color: #662d91;
}
<!--
- Styled directly.
-->
<p class="u-color-world">Lorem ipsum dolor sit amet.</p>
<p class="u-color-politics">Lorem ipsum dolor sit amet.</p>
<p class="u-color-tech">Lorem ipsum dolor sit amet.</p>
<p class="u-color-entertainment">Lorem ipsum dolor sit amet.</p>
<p class="u-color-sport">Lorem ipsum dolor sit amet.</p>
<p class="u-color-weather">Lorem ipsum dolor sit amet.</p>
<hr />
<!--
- Styled via ‘current’ pointer.
-->
<div class="t-world">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-politics">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-tech">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-entertainment">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-sport">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
<div class="t-weather">
<p class="u-color-current">Lorem ipsum dolor sit amet.</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment