I am writing this article with the intention of sharing with others what i have learned working on various projects as a front-end developer. I'm sure most of you will read and nod the various points i will make, as the 'battlefield experience' will be similar for almost all viewers.

Anyway, let's get started.

In most mid to big sized projects, especially with remote teams or newly formed members, css in general gets turned into a big pile of tangled mess. Add to this designers or design teams that can't properly understand re-usability or uniformity of design, and you get a recipe for the mother of all disasters(tech debt).

What happens is that each developer will most likely add it's own color variable(if using sass/less) or with each new feature you are asked to add a new color that looks like one you already have, but not exactly the same. 50 shades of grey is not just a bad novel, it's also what most front-end developers face day to day.

Now, an ideal project would have a set of primary colors with secondary(light/dark) or tertiary(lighter/darker) colors based on the primary ones.

This sounds good from a theoretical point of view, but when you get down and dirty, how would it look like? Well, the solution is provided by SASS and it's wonderful features.

1. Map our primary colors

  $primary-colors: (
  white: #fff,
  black: #000,
  project-grey: #666362,
  project-red: #f62817,
  project-blue: #659ec7

This is the first step. Here we set our primary colors that we want to use in our project. The idea is that we use this original colors to spawn secondary or tertiary variations of them. At this point, you may ask Well Oh Great and Wise Bogdan, why the extra effort and not just create variables for each variations, like most projects use? I won't give you the answer, but after this article is finished, hopefully you can answer this yourself.

Okay, now that we have our map set it's time to write a function that creates this variations.

2. Variation creation functions

  @function get-secondary-colors($primary-map, $amount) {
  $_secondary-colors: ();

  @each $_color, $_value in $primary-map {
    // scss-lint:disable ColorVariable
    @if $_value != #fff and $_value != #000 {
      $_secondary-colors: map-merge($_secondary-colors, (#{$_color}-light: lighten($_value, $amount)));
      $_secondary-colors: map-merge($_secondary-colors, (#{$_color}-dark: darken($_value, $amount)));
    // scss-lint:enable ColorVariable
  @return $_secondary-colors;

Pretty isn't she? What this functions does is that it parses your primary color map, skipping absolute colors like black and white, and creates variations based on a given percentage. This way we keep uniformity of color, since all light/dark or lighter/darker variations are based on the same offset. No more arbitrary colors or offset percentages. This approach makes sure our project colors are clean and properly set.

3. Merge maps

  $colors: map-merge($primary-colors, get-secondary-colors($primary-colors, 40%));

The final step is to merge the variations with the primary colors. In our case, the end result would look like:

  (white: #fff, black: #000, grey: #808080, red: #f00, grey-light: #e6e6e6, grey-dark: #1a1a1a, red-light: #ffcccc, red-dark: #330000)

4. Profit

This is the gist of it. Simple solution to a complex issue. You can create more variations based on different offsets with just small adjustments to the generator function.

This way, with the help of SASS, we can introduce some sanity and DRY into our sass/css architecture. We only have a set of base colors and generator functions that can build variations based on those. No more duplicate color variables, no more losing track of what colors we use and no more files with 200+ lines of color variables,

A live demo is found here:

592 0 1