Generated by SassMeister.com.

SassMeister-input.scss

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

// Create a %placeholder with repeated CSS and @extend them as required.

%btn {
  border: 1px solid;
	margin: 10px 0px;
	padding: 15px 10px 15px 10px;
}

@mixin colours($main, $background) {
  color: $main;
  background-colour: $background;
}

.btn--info {
  @extend %btn;
	@include colours(#00529B, #BDE5F8);
}
.btn--success {
	@extend %btn;
	@include colours(#4F8A10, #DFF2BF);
}
.btn--warning {
	@extend %btn;
	@include colours(#9F6000, #FEEFB3);
}
.btn--error {
	@extend %btn;
	@include colours(#D8000C,#FFBABA);
}

SassMeister-output.css

.btn--info, .btn--success, .btn--warning, .btn--error {
  border: 1px solid;
  margin: 10px 0px;
  padding: 15px 10px 15px 10px;
}

.btn--info {
  color: #00529B;
  background-colour: #BDE5F8;
}

.btn--success {
  color: #4F8A10;
  background-colour: #DFF2BF;
}

.btn--warning {
  color: #9F6000;
  background-colour: #FEEFB3;
}

.btn--error {
  color: #D8000C;
  background-colour: #FFBABA;
}