Generated by SassMeister.com.

SassMeister-input.scss

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

// Neutral color palette
$palette-neutral--xdark:  #2C3643;
$palette-neutral--dark:   #3B444F;
$palette-neutral--base:   #67747C;
$palette-neutral--light:  #99A9B3;
$palette-neutral--xlight: #DBE6EC;

// Primary color palette
$palette-blue--dark:  #1D508D;
$palette-blue--base:  #206FAC;
$palette-blue--light: #288AD6;
$palette-red:         #FA5E5B;
$palette-green:       #16C98D;
$palette-orange:      #FFC83F;
$palette-yellow:      #FEEF6D;

// Themes
$themes: (
  brand: (
    primary: $palette-blue--base,
    secondary: $palette-blue--dark,
    contrast: white
  ),
  highlight: (
    primary: $palette-yellow,
    secondary: $palette-orange,
    contrast: $palette-neutral--dark
  ),
  neutral: (
    primary: $palette-neutral--light,
    secondary: $palette-neutral--xlight,
    contrast: $palette-neutral--xdark
  )
);

// Button base
.btn {
  padding: 10px 16px;
  border-radius: 4px;
}

// Button color variations
@each $name, $theme in $themes {
  .btn--#{$name} {
    color: map-get($theme, contrast);
    background: map-get($theme, primary);
  
    &:hover {
      background: map-get($theme, secondary);
    }
  }
}

SassMeister-output.css

.btn {
  padding: 10px 16px;
  border-radius: 4px;
}

.btn--brand {
  color: white;
  background: #206fac;
}
.btn--brand:hover {
  background: #1d508d;
}

.btn--highlight {
  color: #3b444f;
  background: #feef6d;
}
.btn--highlight:hover {
  background: #ffc83f;
}

.btn--neutral {
  color: #2c3643;
  background: #99a9b3;
}
.btn--neutral:hover {
  background: #dbe6ec;
}