The Case for Sass Maps: Bootstrap Buttons

caseforsassmaps_bootstrap-buttons.scss

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

$btn-default-color: #333;
$btn-default-bg: #fff;
$btn-default-border: #ccc;

$btn-primary-color: #fff;
$btn-primary-bg: $brand-primary;
$btn-primary-border: darken($btn-primary-bg, 5%);

$btn-success-color: #fff;
$btn-success-bg: $brand-successt;
$btn-success-border: darken($btn-success-bg, 5%);

$btn-info-color: #fff;
$btn-info-bg: $brand-info;
$btn-info-border: darken($btn-info-bg, 5%);

$btn-warning-color: #fff;
$btn-warning-bg: $brand-warning;
$btn-warning-border: darken($btn-warning-bg, 5%);

$btn-danger-color: #fff;
$btn-danger-bg: $brand-dange;
$btn-danger-border: darken($btn-danger-bg, 5%);

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

.btn-default {
  background-color: $btn-default-bg;
  border: 1px solid $btn-default-border;
  color: $btn-default-color;
}

.btn-primary {
  background-color: $btn-primary-bg;
  border: 1px solid $btn-primary-border;
  color: $btn-primary-color;
}

.btn-success {
  background-color: $btn-succes-bg;
  border: 1px solid $btn-succes-border;
  color: $btn-succes-color;
}

.btn-info {
  background-color: $btn-info-bg;
  border: 1px solid $btn-info-border;
  color: $btn-info-color;
}

.btn-warning {
  background-color: $btn-warning-bg;
  border: 1px solid $btn-warning-border;
  color: $btn-warning-color;
}

.btn-danger{
  background-color: $btn-danger-bg;
  border: 1px solid $btn-danger-border;
  color: $btn-danger-color;
}