Generated by SassMeister.com.

SassMeister-input-HTML.haml

.button
  Click
.button--error
  Error
.button--success
  Success
.button--pending
  Pending

SassMeister-input.scss

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

// Lists are basically arrays. 

%button {
  height: 100px;
  width: 200px;
}

$button-suffixes: ('dark', 'light', 'success', 'error');

.button {
  @extend %button;  
  @each $suffix in $button-suffixes {
    &--#{$suffix} {
      @extend %button;
      content: $suffix;
    }
  }
}

SassMeister-output.css

.button, .button--dark, .button--light, .button--success, .button--error {
  height: 100px;
  width: 200px;
}

.button--dark {
  content: "dark";
}
.button--light {
  content: "light";
}
.button--success {
  content: "success";
}
.button--error {
  content: "error";
}

SassMeister-rendered.html

.button
  Click
.button--error
  Error
.button--success
  Success
.button--pending
  Pending