Generated by SassMeister.com.

SassMeister-input-HTML.html

<a href="" class="btn -danger -rounded">Cancel</a>
<a href="" class="btn--okay">Okay</a>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

body {
 font-family: "Open Sans"; 
}

$btn-success: #2ecc71;
$btn-danger: #e74c3c;

/* STANDARD BEM APPROACH*/

// .btn {
//   display: inline-block;
//   padding: 1em 2em;
//   margin: 0.25em;
//   border: none;
//   background: #45beff;
//   color: #FFFFFF;
//   text-decoration: none;
//   font-size: 16px;
  
//   &--success {
//     background: $btn-success;
//   }
//   &--danger {
//     background: $btn-danger;
//   }
//   &--large {
//     font-size: 22px;
//   }
//   &--rounded {
//     border-radius: 10px;
//   }
// }

/* POSSIBLE DRY AND MORE FLEXIBLE APPROACH USING PLACEHOLDERS
 * (http://viget.com/extend/bem-sass-modifiers)
*/

//Placeholder classes
%btn {
  display: inline-block;
  padding: 1em 2em;
  margin: 0.25em;
  border: none;
  background: #45beff;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
}

%btn--success {
  background: $btn-success;
}
%btn--danger {
  background: $btn-danger;
}
%btn--large {
  font-size:22px;
}
%btn--rounded {
  border-radius: 10px;
}

// 
.btn {
  @extend %btn;
  &.-success {
    @extend %btn--success;
  }
  &.-danger {
    @extend %btn--danger;
  }
  &.-large {
    @extend %btn--large;
  }
  &.-rounded {
    @extend %btn--rounded;
  }
}

// Saved variations
.btn--okay {
  @extend %btn;
  @extend %btn--success;
  @extend %btn--rounded;
  @extend %btn--large;
}

.btn--cancel {
  @extend %btn;
  @extend %btn--danger;
  @extend %btn--large;
}

SassMeister-output.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
body {
  font-family: "Open Sans";
}

/* STANDARD BEM APPROACH*/
/* POSSIBLE DRY AND MORE FLEXIBLE APPROACH USING PLACEHOLDERS
 * (http://viget.com/extend/bem-sass-modifiers)
*/
.btn, .btn--okay, .btn--cancel {
  display: inline-block;
  padding: 1em 2em;
  margin: 0.25em;
  border: none;
  background: #45beff;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
}

.btn.-success, .btn--okay {
  background: #2ecc71;
}

.btn.-danger, .btn--cancel {
  background: #e74c3c;
}

.btn.-large, .btn--okay, .btn--cancel {
  font-size: 22px;
}

.btn.-rounded, .btn--okay {
  border-radius: 10px;
}

SassMeister-rendered.html

<a href="" class="btn -danger -rounded">Cancel</a>
<a href="" class="btn--okay">Okay</a>