Simple Theming using SCSS

buttons.scss

.button--base {
  cursor: pointer;
  padding: 20px;

  &.button--large {
    padding: 40px;
  }

  &.button--small {
    padding: 5px;
  }
}

$button-colors: (
  light: (
    primary: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    secondary: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    success: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    danger: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    warning: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    info: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    light: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    dark: (
      border: #fff,
      background: #000,
      color: #fff
    )
  ),
  dark: (
    primary: (
      border: #000,
      background: #fff,
      color: #000
    ),
    secondary: (
      border: #000,
      background: #fff,
      color: #000
    ),
    success: (
      border: #000,
      background: #fff,
      color: #000
    ),
    danger: (
      border: #000,
      background: #fff,
      color: #000
    ),
    warning: (
      border: #000,
      background: #fff,
      color: #000
    ),
    info: (
      border: #000,
      background: #fff,
      color: #000
    ),
    light: (
      border: #000,
      background: #fff,
      color: #000
    ),
    dark: (
      border: #000,
      background: #fff,
      color: #000
    )
  ),
  light-old: (
    primary: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    secondary: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    success: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    danger: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    warning: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    info: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    light: (
      border: #fff,
      background: #000,
      color: #fff
    ),
    dark: (
      border: #fff,
      background: #000,
      color: #fff
    )
  ),
  dark-old: (
    primary: (
      border: #000,
      background: #fff,
      color: #000
    ),
    secondary: (
      border: #000,
      background: #fff,
      color: #000
    ),
    success: (
      border: #000,
      background: #fff,
      color: #000
    ),
    danger: (
      border: #000,
      background: #fff,
      color: #000
    ),
    warning: (
      border: #000,
      background: #fff,
      color: #000
    ),
    info: (
      border: #000,
      background: #fff,
      color: #000
    ),
    light: (
      border: #000,
      background: #fff,
      color: #000
    ),
    dark: (
      border: #000,
      background: #fff,
      color: #000
    )
  ),
  orange: (
    primary: (
      border: orange,
      background: #fff,
      color: orange
    ),
    secondary: (
      border: orange,
      background: #fff,
      color: orange
    ),
    success: (
      border: orange,
      background: #fff,
      color: orange
    ),
    danger: (
      border: orange,
      background: #fff,
      color: orange
    ),
    warning: (
      border: orange,
      background: #fff,
      color: orange
    ),
    info: (
      border: orange,
      background: #fff,
      color: orange
    ),
    light: (
      border: orange,
      background: #fff,
      color: orange
    ),
    dark: (
      border: orange,
      background: #fff,
      color: orange
    )
  ),
  xmas: (
    primary: (
      border: red,
      background: green,
      color: red
    ),
    secondary: (
      border: red,
      background: green,
      color: red
    ),
    success: (
      border: red,
      background: green,
      color: red
    ),
    danger: (
      border: red,
      background: green,
      color: red
    ),
    warning: (
      border: red,
      background: green,
      color: red
    ),
    info: (
      border: red,
      background: green,
      color: red
    ),
    light: (
      border: red,
      background: green,
      color: red
    ),
    dark: (
      border: red,
      background: green,
      color: red
    )
  )
);

@each $theme, $colors in $button-colors {
  @each $button-style, $color in $colors {
    .theme-#{$theme} .btn-#{$button-style} {
      @extend .button--base;

      color: map-get($color, color);
      border-color: map-get($color, border);
      background: map-get($color, background)
    }
  }
}