Sass Theming

sass-theme.scss

// Variables
$black : #000000;
$white : #FFFFFF;
$alpha : #FF0000;

$themes: (
  blue: (
    alpha: blue,
    beta: orange
  ),
  red: (
    alpha: $alpha,
    beta: $white
  ),
  new: (
    alpha: green,
    beta: yellow
  )
);


@function map-fetch($map, $keys) {
  $key: nth($keys, 1);
  $length: length($keys);
  $value: map-get($map, $key);
  
  
  @if $value != null {
    @if $length > 1 {
      $rest: ();
      
      @for $i from 2 through $length {
        $rest: append($rest, nth($keys, $i))
      }
      
      @return map-fetch($value, $rest);
    } @else {
      @return $value;
    }
  } @else {
    @return false;
  }
}

@function getThemifyVariable($key) {
  @return map-get($theme-map, $key);
}

@mixin themify ($themes: $themes) {
  @each $theme, $map in $themes {
    .#{$theme} & {
      // Define theme color
      $theme-map : (
          color-alpha: blue
      ) !global;
      
      @each $key, $submap in $map {
        $value: map-fetch($themes, $theme '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      
      @content;
      
      // reset theme color to null
      $theme-map: null !global;
    }
  }
}

//
// Globally Scoped
//
body {
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
form {
  margin: 0 0 30px 0;
}

.component {
  background-color: $alpha;
  color: $white;
  display: inline-block;
  padding: 20px;
  
  .component__title {
    margin: 0;
  }
}



//
// USAGE
//
.card {
  @include themify() {
    background-color: getThemifyVariable('alpha');
    color: getThemifyVariable('beta');
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
  }
}