Generate buttons from a map and two mixins

buttons.scss

$btndarken: 5%;

// ("classname",
//    background-color, color, border,
//    :hover background-color, :hover color, :hover border)

// Each classname will be .btn.#{classsname}
$buttons: (
  ("-default",
    $white, $cape-cod, $alto),
  ("-primary",
    $btn-active-bg, $btn-active-color, $btn-active-border),
  ("is-active",
    $btn-active-bg, $btn-active-color, $btn-active-border),
  ("-secondary",
    $gallery, $storm-dust, $gray),
  ("-outline",
    rgba(0,0,0,0), $white, $white,
    $white, $cape-cod)
);

// Wrap in a mixin so we can call it
// with the rest of the buttons
@mixin buttons() {

  // Iterate through the button map
  @each $b in $buttons {

    // Use the first value as the class name
    .btn.#{nth($b,1)} {

      // Use the other values in order
      @include buttonattr( $b );

      // Focus styles are just the defaults as they *should*
      // have an `outline` anyway
      &:focus {
        @include buttonattr( $b );
      }

      // If the mixin `hover` is present, use it
      // (It contains the contents within a `.no-touch` class)
      @if mixin-exists( hover ) {
        @include hover {
          @include buttonattr( $b, true );
        }
      }

      // Otherwise just use the normal hover pseudo-classes
      @else {
        &:hover {
          @include buttonattr( $b, true );
        }
      }

      // Disabled state
      &.is-disabled {
        opacity: 0.5;
        user-select: none;
        cursor: default;
      }
    }
  }
}

// Create the button attributes
@mixin buttonattr( $map, $hover: false ) {
  // Set initial values for the hover states
  $bg: nth($map,2) !default;
  $color: nth($map,3) !default;
  $border: nth($map,4) !default;

  // If we're creating hover states
  @if $hover {

    // Use the dedicated :hover bg if set
    @if length($map) >= 5 {
      $bg: nth($map,5);
    }

    // Otherwise darken the original background
    @else {
      $bg: darken( $bg, $btndarken );
    }

    // Use the dedicated :hover color if set
    @if length($map) >= 6 {
      $color: nth($map,6);
    }

    // Use the dedicated :hover border if set
    @if length($map) >= 7 {
      $border: nth($map,7);
    }
  }

  background-color: $bg;
  border-color: $border;
  color: $color;
}

// Call the mixin
@include buttons;

// button base class goes here
.btn {
  line-height: 1.5;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid transparent;
  padding: 0.25em 1em;
}