Generated by SassMeister.com.

SassMeister-input.scss

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

// The variables
$buttons:(
  primary:(
	  background: blue,
	  color: #fff,
  ),
  secondary:(
  	background: #f7f7f7,
	  color: #555,
  ),
  subtle:(
    background: red,
  	color: white,
  )
);

// Gets the button key and makes a list (primary, secondary, subtle)
$button-types: map-keys($buttons);

// The Mixin
@mixin button( $button-color, $text-color: white ) {
  @extend %button;
	background: $button-color;
	border-color: darken( $button-color, 10% );
	color: $text-color;

	&:hover,
	&:focus {
		background: darken( $button-color, 5% );
		border-color: darken( $button-color, 15% );
		color: $text-color;
	}
	&:active {
		background: darken( $button-color, 10% );
		border-color: darken( $button-color, 15% );
		color: $text-color;
	}
	&[disabled],
	&:disabled {
		color: hsl( hue( $button-color ), 10%, 80% ) !important;
		background: darken( $button-color, 8% ) !important;
		border-color: darken( $button-color, 15% ) !important;
	}
	&:visited {
		color: $text-color;
	}
}

// Base button styles
%button {
	display: inline-block;
	margin: 0;
	padding: 0 10px 1px;
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
	height: 28px;
	font-size: 13px;
	line-height: 2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
}

// The magic
@each $item in $button-types {
	.button--#{$item} {
	  $button-color: map-get(map-get($buttons, $item), background);
		$button-text: map-get(map-get($buttons, $item), color);

		@include button($button-color, $button-text);
	}
}

SassMeister-output.css

.button--primary, .button--secondary, .button--subtle {
  display: inline-block;
  margin: 0;
  padding: 0 10px 1px;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  height: 28px;
  font-size: 13px;
  line-height: 2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
}

.button--primary {
  background: blue;
  border-color: #0000cc;
  color: white;
}
.button--primary:hover, .button--primary:focus {
  background: #0000e6;
  border-color: #0000b3;
  color: white;
}
.button--primary:active {
  background: #0000cc;
  border-color: #0000b3;
  color: white;
}
.button--primary[disabled], .button--primary:disabled {
  color: #c7c7d1 !important;
  background: #0000d6 !important;
  border-color: #0000b3 !important;
}
.button--primary:visited {
  color: white;
}

.button--secondary {
  background: #f7f7f7;
  border-color: #dedede;
  color: #555555;
}
.button--secondary:hover, .button--secondary:focus {
  background: #eaeaea;
  border-color: #d1d1d1;
  color: #555555;
}
.button--secondary:active {
  background: #dedede;
  border-color: #d1d1d1;
  color: #555555;
}
.button--secondary[disabled], .button--secondary:disabled {
  color: #d1c7c7 !important;
  background: #e3e3e3 !important;
  border-color: #d1d1d1 !important;
}
.button--secondary:visited {
  color: #555555;
}

.button--subtle {
  background: red;
  border-color: #cc0000;
  color: white;
}
.button--subtle:hover, .button--subtle:focus {
  background: #e60000;
  border-color: #b30000;
  color: white;
}
.button--subtle:active {
  background: #cc0000;
  border-color: #b30000;
  color: white;
}
.button--subtle[disabled], .button--subtle:disabled {
  color: #d1c7c7 !important;
  background: #d60000 !important;
  border-color: #b30000 !important;
}
.button--subtle:visited {
  color: white;
}