Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

$buttons:(
  red:(
    background: red,
    border-color: shade(red, 15%),
    border-top-color: shade(red, 10%),
    border-bottom-color: shade(red, 20%),
    color: white,
    box-shadow: "inset 0 -1px 0 rgba(255,255,255,0.8)",
    
    hover:(
    ),
    focus:(
    ),
    disabled:(
      background: #298cba !important,
      border-color: #1b607f !important,
      color: #94cde7 !important,
      text-shadow: 0 -1px 0 rgba(0, 0, 0, .1) !important
    )
  ),
  primary:(
    background: blue,
    border-color: shade(blue, 15%),
    border-top-color: shade(blue, 10%),
    border-bottom-color: shade(blue, 20%),
    color: white,
    
    focus:(
      border-color: #0e3950, // MT / check this color
      box-shadow:(
        inset 0 1px 0 rgba(120, 200, 230, .6),
        1px 1px 2px rgba(0, 0, 0, .4)
      )

    ),
    disabled:(
      background: #298cba !important,
      border-color: #1b607f !important,
      color: #94cde7 !important,
      text-shadow: 0 -1px 0 rgba(0, 0, 0, .1) !important
    )
  )
);

@each $type in map-keys($buttons) {
  .button-#{$type} {
    @each $attr in map-keys(map-get($buttons,$type)) {

      @if length(map-get(map-get($buttons, $type), $attr)) == 1 {
        // Only outputs properties with no nested maps (static)
        #{$attr}: unquote(map-get(map-get($buttons,$type), $attr));
      } @else {
        // Outputs other properties (hover, focus)
        &:#{$attr} {
          @each $attr_2 in map-keys(map-get(map-get($buttons, $type), $attr)){
            #{$attr_2}: map-get(map-get(map-get($buttons, $type), $attr), $attr_2);
          }
        }
      }
    }
  }
}

SassMeister-output.css

.button-red {
  background: red;
  border-color: #d80000;
  border-top-color: #e50000;
  border-bottom-color: #cc0000;
  color: white;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.8);
}
.button-red:disabled {
  background: #298cba !important;
  border-color: #1b607f !important;
  color: #94cde7 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

.button-primary {
  background: blue;
  border-color: #0000d8;
  border-top-color: #0000e5;
  border-bottom-color: #0000cc;
  color: white;
}
.button-primary:focus {
  border-color: #0e3950;
  box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.4);
}
.button-primary:disabled {
  background: #298cba !important;
  border-color: #1b607f !important;
  color: #94cde7 !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}