Stateful theming for Sass

SassMeister-input.scss

// ----
// 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);
}

SassMeister-output.css

.summer .header {
  background: #ffd700;
}

.winter .header {
  background: #7292b5;
}

.summer .title {
  border-bottom: #0084b1;
  border-top: #0084b1;
}

.winter .title {
  border-bottom: #f0f8ff;
  border-top: #f0f8ff;
}