A simply way to create components with same structure but based on different color schemes using sass, in this example i create a set of buttons based on a variable map then looping on it i create a set of classes based on the container key. Feel free to improve this gist :) SASS 3.3 or greater is required

_buttons.sass

// BUTTONS
// check the $btn var in _variable.scss. to add buttons simply add a block of color inside
// $btn map
=btn-scheme ($type, $color)
  .btn--#{$type}
    background-color: map-get($color, "bg")
    color: map-get($color, "text")
    &:hover, &:link, &:focus, &:active
      color: map-get($color, "text")
      text-decoration: none
    &:hover
      box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.2)
      background-color: map-get($color, "bg-hover")
    &:active
      box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.2)
      background-color: map-get($color, "bg-pressed")
    &.btn--disabled
      background-color: map-get($color, "bg-disabled")
      color: map-get($color, "text-disabled")
      pointer-events: none

.btn
  display: inline-block
  font-family: 'Helvetica', sans-serif
  border-radius: 2px
  transition: all .2s ease
  font-size: 14px
  text-transform: uppercase
  font-weight: bold
  padding: 15px
  text-decoration: none

@each $type, $color in $btn
  +btn-scheme($type, $color)

_variable.scss

$btn: (
  "primary": (
    "bg": #333333,
    "bg-hover": #4d4d4d,
    "bg-pressed": #666666,
    "bg-disabled": #d6d6d6,
    "text": #ffffff,
    "text-disabled": #999999
  ),
  "lighter": (
    "bg": #ffffff,
    "bg-hover": #e6e6e6,
    "bg-pressed": #cccccc,
    "bg-disabled": #5c5c5c,
    "text": #333333,
    "text-disabled": #333333
  )
);