Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

$purple: purple;
$red: red;
$green: green;

%button {
  background: $purple;
  height: 40px;
  width: 100px;
}

$buttons: (
  error: (
    background: $red
  ),
  success: (
    background: $green,
    border: '1px solid black'
  ),
  pending: (
    background: $green
  )
);


.button {
  @extend %button;
  @each $name, $attrs in $buttons {
    &--#{$name} {
      @extend %button;
      @each $attr, $val in $attrs {
        #{$attr}: #{$val};
      }
    }
  }
}

SassMeister-output.css

.button, .button--error, .button--success, .button--pending {
  background: purple;
  height: 40px;
  width: 100px;
}

.button--error {
  background: red;
}
.button--success {
  background: green;
  border: 1px solid black;
}
.button--pending {
  background: green;
}