<section class="theme-dark">
  <a href="#" class="m-button">Button</a>
</section>

<section class="theme-light">
  <a href="#" class="m-button">Button</a>
</section>
// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

// _config.scss
$themes: (
  theme1: theme-light,
  theme2: theme-dark
);

// _functions.scss
@function setStyle($map, $object, $style) {
  @if map-has-key($map, $object) {
    @return map-get(map-get($map, $object), $style);
  }
  @warn "The key ´#{$object} is not available in the map.";
  @return null;
}

// _m-buttons.scss
// 1.Config
$config: (
  theme1: (
    background: #f2f2f2,
    color: #000
  ),
  theme2: (
    background: #666,
    color: #fff
  )
);

// 2.Base
.m-button {
  @each $key, $value in $themes {
    @if map-has-key($config, $key) {
      .#{$value} & {
        background: setStyle($config, $key, background);
        color: setStyle($config, $key, color);
      }
    } @else {
      @warn "The key ´#{$key} isn't defined in the map $config´"
    }
  }
}

// rough button styles
.m-button {
  display: inline-block;
  text-decoration: none;
  padding: 1em 2em;
  border-radius: .3em;
  margin: .5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.