Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Stateful theming for Sass
// ----
// libsass (v3.3.6)
// ----
// =====================================================================
//
// STATEFUL THEMING FOR SASS
// -------------------------
// Indrek Paas <@indrekpaas>
//
// Inspired by Harry Roberts' 4½ Methods for Theming in (S)CSS
// https://speakerdeck.com/csswizardry/4half-methods-for-theming-in-s-css
//
//
// 05.08.2016 Initial release
//
// =====================================================================
$themes: (
summer: (
primary-color: #ffd700,
secondary-color: #0084b1,
),
winter: (
primary-color: #7292b5,
secondary-color: #f0f8ff,
),
);
@mixin theme($properties, $key) {
@each $theme in map-keys($themes) {
.#{$theme} & {
@each $property in $properties {
#{$property}: map-deep-get($themes, $theme, $key);
}
}
}
}
/// Map deep get
/// @author Hugo Giraudel
/// @access public
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Key chain
/// @return {*} - Desired value
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
.header {
@include theme(background, primary-color);
}
.title {
@include theme(border-bottom border-top, secondary-color);
}
.summer .header {
background: #ffd700;
}
.winter .header {
background: #7292b5;
}
.summer .title {
border-bottom: #0084b1;
border-top: #0084b1;
}
.winter .title {
border-bottom: #f0f8ff;
border-top: #f0f8ff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment