Generated by SassMeister.com.

SassMeister-input-HTML.html

            <h4>Buttons</h4>
            <a class="btn--default" href="#">Button</a>
            <a class="btn--success" href="#">Success</a>
            <a class="btn--error" href="#">Error</a>
            <a class="btn--warning" href="#">Warning</a>
            <a class="btn--info" href="#">Info</a>

SassMeister-input.scss

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

// Color Palette

$teal       : #6dc5bf;
$green      : #77d693;
$red        : #eb8a8d;
$orange     : #ff8d6a;
$purple     : #a38ecd;


%btn {
	margin: 0;
	padding: 20px 50px;
 	border: 0;
	border-radius : 4px;
 	color : #fff;
	text-align: center;
 	text-decoration: none;
 	text-transform: uppercase;
	font-size : 14px;
 	line-height: 0;
}

$buttons: (
	default: $teal,
	success: $green,
	error:   $red,
	warning: $orange,
	info:    $purple
);

@each $name, $btn in $buttons {
	.btn--#{$name} {
		@extend %btn;
		background-color: $btn;
	}
}

SassMeister-output.css

.btn--default, .btn--success, .btn--error, .btn--warning, .btn--info {
  margin: 0;
  padding: 20px 50px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 0;
}

.btn--default {
  background-color: #6dc5bf;
}

.btn--success {
  background-color: #77d693;
}

.btn--error {
  background-color: #eb8a8d;
}

.btn--warning {
  background-color: #ff8d6a;
}

.btn--info {
  background-color: #a38ecd;
}

SassMeister-rendered.html

            <h4>Buttons</h4>
            <a class="btn--default" href="#">Button</a>
            <a class="btn--success" href="#">Success</a>
            <a class="btn--error" href="#">Error</a>
            <a class="btn--warning" href="#">Warning</a>
            <a class="btn--info" href="#">Info</a>