Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

// Implementation of Sass 3.3 maps to build mixins with built in 
// plugable api to override output without touching mixin or duplicating output
// ------------------------
// this allows for the component to be package managed with a tool like bower
// without being tied to its predefined styles/settings
// it also allows for the component mixin to apply default styles for unit testing
// ------------------------
// example use case:
// 'bower install <component-name>'
// '@import <component-name>' (within your projects main Sass file)
// this provides the component along with it's default prototype styles
// to override, redefine the '$structure-styles' and '$skin-styles' maps 
// within a new partial (example: /components/_<component-name>.scss)
// ------------------------

// Loop through a map to write styles
@mixin component-constructor($map) {
  // Find properties and values in map
  @each $p, $v in $map {
    // Write property: value;
    #{$p}: $v;
  }
}

// default protype structure styles
$structure-styles:(
  padding: .5em,
  margin: 1em,
) !default;

@mixin component--structure($styles) {
  @include component-constructor($structure-styles);
}

// default protype structure styles
$skin-styles:(
  background: grey,
  border: 1px solid darken(grey, 15%),
  color: black
) !default;

@mixin component--skin($styles) {
  @include component-constructor($skin-styles);
}

// ------------------------
// everything above this line can be abstracted and handled in a package manager
// everything below this line is the project specific code
// comment out the '$structure-styles' and '$skin-styles' maps bellow to see the default styles
// ------------------------

// override default prototype skin with custom structure styles
$structure-styles:(
  padding: 2em,
  margin: 1em 0 1em 0,
);

// override default prototype skin with custom skin styles
$skin-styles:(
  color: purple,
  background: pink,
  border: 1px solid red
);

// button structure
.btn--structure {
  @include component--structure($structure-styles);
}

// button skin
.btn--skin {
  @include component--skin($skin-styles);
}

SassMeister-output.css

.btn--structure {
  padding: 2em;
  margin: 1em 0 1em 0;
}

.btn--skin {
  color: purple;
  background: pink;
  border: 1px solid red;
}