Theme generator

_theme-generator.scss

// ----
// libsass (v3.2.2)
// ----

/*# Theme generator 

@see - Source : <http://www.developwithpurpose.com/creating-a-sass-theme-engine/>

Styleguide theming
*/


$arial: "'Arial','Helvetica', sans-serif" ;

$theme--default: (
  post__title: (color:white,background-color:black,font-family:#{$arial}),
  post__sub-title: black
);

$theme--forest: (
  post__title: (color:green,background-color:yellow),
);

$theme--ocean: (
  post__title: aqua,
  post__sub-title: darken(aqua,20%)
);

//Generator
@mixin theme-generator($theme: $theme--default) {
    // Generating all the class
    @each $class, $value in $theme {
      .#{$class}{
          // loop through value if it's a map
          @if type-of($value) == 'map'{
            @each $property, $definition in $value {
              #{$property}: $definition;
            }
          }
          @else{
            color:$value;
          }
      }
    }
}

//-----------------------------------------------------*/
// USAGE
//-----------------------------------------------------*/
// Generate default theme
@include theme-generator();

.theme--forest {
  @include theme-generator($theme--forest);
}

.theme--ocean {
  @include theme-generator($theme--ocean);
}

theme-generator-HTML.html

<div class="theme--default">
  <div class="post__title">Default Post Title</div>
  <p class="post__sub-title">Default post SubTitle</p>
</div>
<hr>
<div class="theme--forest">
  <div class="post__title">Default Post Title</div>
  <p class="post__sub-title">Default post SubTitle</p>
</div>
<hr>
<div class="theme--ocean">
  <div class="post__title">Default Post Title</div>
  <p class="post__sub-title">Default post SubTitle</p>
</div>

theme-generator-output.css

/*# Theme generator 

@see - Source : <http://www.developwithpurpose.com/creating-a-sass-theme-engine/>

Styleguide theming
*/
.post__title {
  color: white;
  background-color: black;
  font-family: 'Arial','Helvetica', sans-serif;
}

.post__sub-title {
  color: black;
}

.theme--forest .post__title {
  color: green;
  background-color: yellow;
}

.theme--ocean .post__title {
  color: aqua;
}

.theme--ocean .post__sub-title {
  color: #009999;
}