sass maps and loops for compiling theme logic in a core.css

themer.scss

// Themes list and color maps
$themes: (
  'base': (
    brand-color: #1ab6df,
    main-nav-bg: #204474,
    bg-mod-one: #ee6700,
    bg-mod-two: #0077b4,
    bg-mod-three: #009bac,
    bg-mod-four: #008b45,
    bg-mod-five: #204474,
    bg-mod-six: #204474,
    section-head-bg: #3f3f3f,
    icon-color: #895A4A,
    alt-color: #1BDD69,
    login-color: #004272,
  ),
  'blue': (
    brand-color: #5596da,
    main-nav-bg: #5596da,
    bg-mod-one: #5596da,
    bg-mod-two: #5596da,
    bg-mod-three: #5596da,
    bg-mod-four: #5596da,
    bg-mod-five: #5596da,
    bg-mod-six: #5596da,
    section-head-bg: #3F3F3F,
    icon-color: #895A4A,
    alt-color: darken(#48e000, 15),
    login-color: #0096D6,
  ),
  'gray': (
    brand-color: #006BB6,
    main-nav-bg: #CCCCCC,
    bg-mod-one: #CCCCCC,
    bg-mod-two: #CCCCCC,
    bg-mod-three: #CCCCCC,
    bg-mod-four: #CCCCCC,
    bg-mod-five: #CCCCCC,
    bg-mod-six: #CCCCCC,
    section-head-bg: #3F3F3F,
    icon-color: #895A4A,
    alt-color: #1BDD69,
    login-color: #0096D6,
  ),
);

// Needs bem-constructor -> https://github.com/danielguillan/bem-constructor
// .card is an object and one would need to 
// repeat this looping for each component that is theme-able
.card {
  @each $name, $theme in $themes {
    @include theme( $name ) {
      @each $key, $value in $name {
        background: map-get( $theme, brand-color ) !important;
      }
    }
  }
}