Color Registry

input.sass

// -------------------------------------
//   Vars
// -------------------------------------

$c-base: #333
$c-action: #ff971c

$c-keys: $c-base, $c-action
$c-registry: ()

@for $i from 1 through length($c-keys)
  $c-registry: append($c-registry, 0%)

// -------------------------------------
//   Functions
// -------------------------------------

@function replace-nth($list, $index, $val)
  // Modified: http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/
  $result: ()
  @for $i from 1 through length($list)
    $result: append($result, if($i == $index, $val, nth($list, $i)))
  @return $result

// -------------------------------------
//   Mixins
// -------------------------------------

=c($color, $scale: 0%, $bg: false)
  $i1: index($c-keys, $color)
  $i2: 1
  @if $scale != 0%
    @if index(nth($c-registry, $i1), $scale) == false
      $c-registry: replace-nth($c-registry, $i1, append(nth($c-registry, $i1), $scale))
    $i2: index(nth($c-registry, $i1), $scale)
  $i3: if($bg, 2, 1)
  @extend %color-#{$i1}-#{$i2}-#{$i3}

// -------------------------------------
//   Test
// -------------------------------------

// ----- Content ----- //

h1
  +c($c-base)

h2
  +c($c-base)

h3
  +c($c-base, 10%)

// ----- Button ----- //

.btn--a
  +c($c-action, 0%, bg)

.btn--b
  +c($c-action, -50%)
  +c($c-action, 25%, bg)
 
// ----- Card ----- //
 
.card--a
  +c($c-base, 0%, bg)
 
.card--b
  +c($c-action, 0%, bg)
 
.card--c
  +c($c-base, 10%)
  +c($c-action, 25%, bg)

// -------------------------------------
//   Placeholders
// -------------------------------------

@for $i1 from 1 through length($c-keys)
  $val1: nth($c-keys, $i1)
  @for $i2 from 1 through length(nth($c-registry, $i1))
    $val2: nth(nth($c-registry, $i1), $i2)

    %color-#{$i1}-#{$i2}-1
      color: scale-color($val1, $lightness: $val2)
    %color-#{$i1}-#{$i2}-2
      background-color: scale-color($val1, $lightness: $val2)

output.css

h1, h2 {
  color: #333333;
}

.card--a {
  background-color: #333333;
}

h3, .card--c {
  color: #474747;
}

.btn--a, .card--b {
  background-color: #ff971c;
}

.btn--b {
  color: #8e4d00;
}

.btn--b, .card--c {
  background-color: #ffb155;
}