Better Colors using SASS 3.3 Functions & Maps

Better-Colors-Output.css

html {
  background-color: #a6a6a6;
}

body {
  color: #9794ca;
}

a {
  color: blue;
}

Better-Colors.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

//--- SASSMESITER.COM ---\\

@function base($pallette){
  @return map-get($base_palette, $pallette);
}

@function clr($palette, $tone: 'base') {
  @return map-get(map-get($palettes, $palette), $tone);
}

@mixin bg($color, $tone:base){
  background-color: clr($color, $tone);
}

$base_palette: (
  black: #333,
  blue: #00f,
  purple: rgb(42,40,80)
);

$palettes: (
  black: (
    base: base(black),
    light: lighten( base(black), 15% ),
    xlight: lighten( base(black), 45% ),
    dark: darken( base(black), 15% ),
    xdark: darken( base(black), 45% ),
  ),
  blue: (
    base:  base(blue),
    light: lighten( base(blue), 15% ),
    xlight: lighten( base(blue), 45% ),
    dark: darken( base(blue), 15% ),
    xdark: darken( base(blue), 45% ),
  ),
  purple: (
    base:   base(purple),
    light: lighten( base(purple), 15% ),
    xlight: lighten( base(purple), 45% ),
    dark: darken( base(purple), 15% ),
    xdark: darken( base(purple), 45% ),
  )
);



html{ @include bg(black, xlight); }
body{ color: clr(purple, xlight); }
a{ color: clr(blue); }

SassMeister-output.css

html {
  background-color: #a6a6a6;
}

body {
  color: #9794ca;
}

a {
  color: blue;
}