The Case for Sass Maps: Sass Map Buttons

caseforsassmaps_sassmap-buttons.scss

////////////////////////
// Variables
////////////////////////

$themeColors: (
  gray-dark: #333,
  gray: #777,
  gray-light: #ccc,
  white: #fff,
  red: #d9534f,
  yellow: #f0ad4e,
  green: #5cb85c,
  blue: #337ab7,
  blue-light: #5bc0de
);

@function getColor($color) {
  return map-get($themeColors, $color);
}

////////////////////////
// Classes
////////////////////////

.btn-primary {
  background-color: getColor(blue);
  border: 1px solid darken(getColor(blue), 5%);
  color: getColor(white);
}

.btn-success {
  background-color: getColor(green);
  border: 1px solid darken(getColor(green), 5%);
  color: getColor(white);
}

.btn-info {
  background-color: getColor(blue-light);
  border: 1px solid darken(getColor(blue-light), 5%);
  color: getColor(white);
}

.btn-warning {
  background-color: getColor(yellow);
  border: 1px solid darken(getColor(yellow), 5%);
  color: getColor(white);
}

.btn-danger{
  background-color: getColor(red);
  border: 1px solid darken(getColor(red), 5%);
  color: getColor(white);
}