Advanced config based SASS buttons

_buttons.scss

$buttons: () !default;
// Extract the common styles into a placeholder
%btn-base {
  display: inline-block;
  line-height: 1;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  transition: 50ms transform;
  transform: translateZ(0);
}

/// Private mixin to create buttons.
@mixin _create-btn($button-key, $size: small) {
  $button: extend-in-map($buttons, $button-key);
  @extend %btn-base;
  z-index: z(buttons, base);

  color: key($button, color);

  @if ($size == small) {
    padding: 8px 12px;
    font-size: 14px;
  } @else if ($size == medium) {
    padding: 10px 12px;
    font-size: 14px;
  } @else if ($size == large) {
    padding: 12px 20px;
    font-size: 16px;
  }

  &:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: key($button, background);
    border: 2px solid key($button, border);
    z-index: z(buttons, background);
  }

  &:after {
    @include diagonal-overlay(0, key($button, active-overlay));
    z-index: z(buttons, active-overlay);
  }
  
  @include selector-group(active) {
    color: key($button, active-color);

    &:before {
      border-color: key($button, active-border);
      background: key($button, active-background);
    }

    &:after {
      @include overlay-set-pos(60%);
    }
  }

  &:active {
    transform: translateY(1px);
  }
}

/// Public mixin for creating buttons.
@mixin btn($button-name, $size: medium, $debug: $debug) {
  @if $debug {
    
    // If debug mode is on, use the less efficient, more readable version.
    @include _create-btn($button-name, $size);
  } @else {
    @extend %button-#{$size}--#{$button-name};
  }
}

/// Initial setup for creating buttons.
@mixin create-buttons($button-map) {
  // Loop through each configuration of button and create a placeholder for it.
  @each $name, $button in $button-map {
    %button-small--#{$name} {
      @include _create-btn($name, small);
    }
    %button-medium--#{$name} {
      @include _create-btn($name, medium);
    }
    %button-large--#{$name} {
      @include _create-btn($name, large);
    }
  }
}

_config.scss

$debug: false;

$buttons: (
  _base: (
    background: $sky-dark,
    color: #fff,
    border: $sky-dark,
    active-background: $sky-dark,
    active-color: #fff,
    active-overlay: rgba($sky-light, 0.65),
    active-border: $sky-dark
  ),
  blue: (
    extend: _base // extend key takes config from provided key and lets you override what's different.
  ),
  white: (
    background: #fff,
    color: $sky-dark,
    border: $sky-dark,
    active-background: #fff,
    active-color: #bababa,
    active-border: #bababa,
    active-overlay: #f5f5f5
  ),
  white-no-border: (
    extend: white,
    border: #fff,
    active-border: #fff
  )
);

_elements.scss

// Create button classes
@each $key, $configuration in $buttons {
  @if $key != '_base' {
    .btn.#{$key}.small {
      @include btn($key, small);
    }
    .btn.#{$key}.large {
      @include btn($key, large);
    }
  }
}

_my-component.scss

// Use on random cta
.my-cta {
  // other styles...
  
  button {
    @include btn(blue, small);
  }
}