Sass/Compass theming

_constants.scss

$theme:
  page #fff

  navigation (
    background #f4f4f4
    text       #595959
  )
;

$levels:
  darkest  -75%
  darker   -50%
  dark     -25%
  darkish  -10%
  original   0%
  lightish  10%
  light     25%
  lighter   50%
  lightest  75%
;

_functions.scss

// Get a single value from a list of `(key value)` pairs.
@function value-from-list($key, $list) {
  $lookup: $key;
  $target: $list;
  @if (type-of($lookup) == 'string') {
    $lookup: -compass-list($lookup);
  }
  @for $i from 1 through length($lookup) {
    $found: '__false';
    @for $j from 1 through length($target) / 2 {
      @if (nth($target, ($j * 2) - 1) == nth($lookup, $i)) {
        $found: nth($target, ($j * 2));
      }
    }
    @if ($found == '__false') {
      @warn "The list (#{$list}) does not contain a value for key '#{$key}'.";
      @return false;
    }
    $target: $found;
  }
  @return $target;
}

// Get the colour for a given theme component, e.g., 'page'.
@function theme($component, $level: original) {
  $colour:     value-from-list($component, $theme);
  $brightness: value-from-list($level,     $levels);
  @if ($brightness < 0%) {
    @return darken($colour, abs($brightness));
  }
  @if ($brightness > 0%) {
    @return lighten($colour, $brightness);
  }
  @return $colour;
}

usage.scss

@import 'constants';
@import 'functions';

body {
  background-color: theme(page);
}

#navigation {
  background-color: theme(navigation background);

  a {
    color: theme(navigation text);

    &:hover {
      color: theme(navigation text, darker);
    }
  }
}