Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

/// Original idea from Harry Roberts
/// http://sassmeister.com/gist/20b62018e8143bc7f3fc
/// I pushed it a bit further by allowing subkeys in themes.


/// Themes map
/// A theme is a name associated to a map of subkeys, each key being mapped to 
/// a specific color. For instance, a theme `unicorn` could have two subkeys 
/// called `primary` and `secondary`, respectively mapped to `hotpink` and
/// `deeppink`.
/// For a theme using a single color, an empty key name will result in a shorter
/// helper class, such as `.t-pegasus--border-color`.
///
/// @type Map
/// @prop {Map} key - Theme name
/// @prop {Color} key.subkey - Color name
$theme-map: (
  'unicorn': (
    'primary': hotpink,
    'secondary': deeppink,
  ),
  'pegasus': (
    '': white
  ),
  'dragon': (
    'alpha': tomato,
    'beta': red,
    'delta': firebrick,
  ),
) !default;


/// Themed properties
/// Each themed property will be granted helper classes composed of the global
/// theme prefix, the theme name, the color name, and then the said property.
/// For instance, `.t-unicorn--border-color--primary` where:
/// * `t-` is the global prefix
/// * `unicorn` is the theme name
/// * `border-color` is the property name
/// * `primary` is the color name
///
/// @type List
$theme-properties: (
  'color', 
  'border-color', 
  'background-color',
) !default;


/// Class prefix for theme classes
/// The theme prefix is anything but mandatory. It can be used as a namespace or
/// a convention helper. For instance, using `t-`, we make it crystal clear that
/// the helper classes are related to theming.
///
/// @type String
$theme-prefix: 't-' !default;


/// Wrapper mixin for theme generation
/// This mixin does not accept any argument because its only goal is to avoid
/// having logic at the stylesheet root level. It should be included where 
/// theme related helper classes are intended to live.
///
/// @require $theme-map
/// @require $theme-properties
/// @require $theme-prefix
/// @output Theme classes
@mixin theme-builder {
  // Loop over $theme-map (1st loop...)
  @each $theme-name, $theme-keys in $theme-map {
    /* `#{$theme-name}` theme helper classes */
    
    // Loop over theme's subkeys (2nd loop...)
    @each $theme-key, $color in $theme-keys {
      // Loop over $theme-properties (3rd loop...)
      @each $property in $theme-properties {
        // Take care of possible empty key
        $key-separator: if(str-length($theme-key) > 0, '--', '');
        // Create a localized selector always using current theme
        // e.g. `.t-ocean .t-border-color--primary`
        .#{$theme-prefix + $theme-name} .#{$theme-prefix + $property + $key-separator + $theme-key},
        // Create a theme specific selector
        // e.g. `.t-ocean--border-color--primary`
        .#{$theme-prefix + $theme-name + '--' + $property + $key-separator + $theme-key} {
          #{$property}: $color;
        }
      }
    }
  }
}

// Include the mixin to output helper classes
@include theme-builder;

SassMeister-output.css

/* `unicorn` theme helper classes */
.t-unicorn .t-color--primary,
.t-unicorn--color--primary {
  color: hotpink;
}

.t-unicorn .t-border-color--primary,
.t-unicorn--border-color--primary {
  border-color: hotpink;
}

.t-unicorn .t-background-color--primary,
.t-unicorn--background-color--primary {
  background-color: hotpink;
}

.t-unicorn .t-color--secondary,
.t-unicorn--color--secondary {
  color: deeppink;
}

.t-unicorn .t-border-color--secondary,
.t-unicorn--border-color--secondary {
  border-color: deeppink;
}

.t-unicorn .t-background-color--secondary,
.t-unicorn--background-color--secondary {
  background-color: deeppink;
}

/* `pegasus` theme helper classes */
.t-pegasus .t-color,
.t-pegasus--color {
  color: white;
}

.t-pegasus .t-border-color,
.t-pegasus--border-color {
  border-color: white;
}

.t-pegasus .t-background-color,
.t-pegasus--background-color {
  background-color: white;
}

/* `dragon` theme helper classes */
.t-dragon .t-color--alpha,
.t-dragon--color--alpha {
  color: tomato;
}

.t-dragon .t-border-color--alpha,
.t-dragon--border-color--alpha {
  border-color: tomato;
}

.t-dragon .t-background-color--alpha,
.t-dragon--background-color--alpha {
  background-color: tomato;
}

.t-dragon .t-color--beta,
.t-dragon--color--beta {
  color: red;
}

.t-dragon .t-border-color--beta,
.t-dragon--border-color--beta {
  border-color: red;
}

.t-dragon .t-background-color--beta,
.t-dragon--background-color--beta {
  background-color: red;
}

.t-dragon .t-color--delta,
.t-dragon--color--delta {
  color: firebrick;
}

.t-dragon .t-border-color--delta,
.t-dragon--border-color--delta {
  border-color: firebrick;
}

.t-dragon .t-background-color--delta,
.t-dragon--background-color--delta {
  background-color: firebrick;
}