Sassの色管理パターン

create-swatch.scss

// Create swatch
$color-base: #33ff33;
$color-accent: #3333ff;

.header {
  background-color: $color-base;
}

.header .active {
  color: $color-accent;
}

extend-css-color-keyword.scss

// Extend CSS color keywords
$my-red: #ee3333;
$my-blue: #3333ee;

.header {
  background-color: $my-red;
}

.header .active {
  color: $my-blue;
}

semantic-color.scss

// Name variables its usage
$header-bg: #33ff33;
$header-active-fg: #3333ff;

.header {
  background-color: $header-bg;
}

.header .active {
  color: $my-blue;
}

This is what I do.
https://gist.github.com/kotarok/ec32bb632797af084551