Programatically generate a css button

_mixins.scss

@function extend($obj, $ext-obj) {
  @return map-merge($obj, $ext-obj);
}

/**
 * Usage
 * @method button
 * @param  {Object} $opts - options
 * @usage
 *
 * 	@include button((
 *    name: 'my-button',
 *    size: 12px,
 *    weight: 500,
 *    background: $blue
 * ));
 */
@mixin button($opts: ()) {

  $opts: extend((
    size: 14px,
    weight: normal,
    color: white,
    radius: 4px,
    padding: 0.5em 1em,
    outline: none,
    gradient: false,
    shadow: true,
    background: white,
    duration: 200ms,
    border: 1px solid darken(map-get($opts, background), 3%)
  ), $opts);

  button.#{map-get($opts, name)} {
    font-size:      map-get($opts, size);
    color:          map-get($opts, color);
    border:         map-get($opts, border);
    border-radius:  map-get($opts, radius);
    padding:        map-get($opts, padding);
    font-weight:    map-get($opts, weight);
    outline:        map-get($opts, outline);
    cursor:         pointer;
    box-shadow:     none;
    transition:     box-shadow map-get($opts, duration);

    $gradient:  map-get($opts, gradient);
    $shadow:    map-get($opts, shadow);

    @if $gradient == true {
      background: linear-gradient(to bottom, map-get($opts, background), darken(map-get($opts, background), 3%));
    } @else {
      background: map-get($opts, background);
    }

    &:hover {
      background: map-get($opts, background);

      @if $shadow == true {
        box-shadow: 0 6px 12px 0 rgba(black, 0.15);
      }
    }
  }
}