Sass: Colors

With the influx of color usage with designers, it's at times best to organize your colors by tone. In the past we've run into concerns where we would name colors by obscure names or we would have 5 different variations of light, lighter, dark ... etc.

The updated format looks something like this. As with fonts, we are utilizing a list map.

// Color Map
$colors: (
  black: #2C3E50,
  white: #fff,
  gray: (
    base: #999,
    light: #ccc,
    dark: #333
  ),
  teal: (
    base: #139397,
    light: #33afb3,
    dark: #264d4e
  )
);

To use a color:

.class-one {
  color: setcolor(black)
}
.class-two {
  color: setcolor(black, light)
}

By default, if you only use the color name, it will default to the base color. Otherwise it will pull in the tone that you were looking for.