Color management in CSS isn't easy. Each element may have colors for their background, border and text. They're often redundant — using the same hex color dozens of times in a CSS document isn't unusual.

Luckily, Sass offers us a way to manage this repetition, turn our color palette into more of a color strategy, and make changes to an entire project with just a few edits. Here's how to use Sass's functions to manage color across your design faster than with plain CSS.

1. Find the opportunity

The sample below may use a grid, but everything seems to float around without purpose. We're going to make this design look more organized, more aesthetically pleasing and easier to manage behind the scenes.

2a. The old way: define base colors

At one time we used what some might call a slightly redundant approach to naming colors. First, we create Sass variables named for what they look like.

$slate: #9D9D9D;
$bondi-blue: #2DAEBF;
$olive: #808000;

At first glance, naming colors with color names like "slate" defeats the purpose of semantics, but we're not done yet. Next we create Sass variables that describe their purpose as, say, a submit button's background color. Their values? The variables we created above.

$button-bg: $bondi-blue;

That means we don't have to guess what each hex color looks like. We've already defined it in English (or language of your choice). Either that or you learn to read hex.

2b. The current way: think practical

After much trial-and-error, we discovered the best way to name colors isn’t to name colors, but to name purpose. $primary-color: $blue makes sense the first time around, but colors tend to change with each iteration. Today’s $blue might become slightly more blue-green tomorrow. Or lavender. Or navy. It’s happened before, and six months later left us scratching our head.

A hex with a comment, like $primary-color: #2daebf; // pale blue 2014-07-01, is much easier to adjust in the future. So what are purposeful colors? Try:

$primary-color
$secondary-color
$primary-background-color
$secondary-background-color
$primary-brand-color
$secondary-brand-color


3. Make variations on the base colors

When you look at them, few elements use wildly different colors. Unless we want a bombastic color palette, it's best to restrain ourselves. For example:

Some things don't pair well. Nails and tires. Tacos and Moscato. Lannisters and Starks. There's something yeeesh about clashing parts of the rainbow — something that makes us favor shades over hues in design. This is where Sass shines.

The scale-color() function lets us adjust a color's lightness. We can darken it (negative numbers) or brighten it (positive numbers). And if we decide to change the button from blue-ish to olive (and our definition of “olive” isn’t everyone’s), the change is just an edit away.

button {
    background-color: $button-bg;
}
a {
    color: scale-color($button-bg, $lightness: –10%);
}

The code above turns every link blue — but makes text links slightly darker than normal. We do that because small blue text can look lighter than it should. All that open space in the letters' counters appear to mix a little white with the blue.

So how else can Sass play with color? Plenty of ways.

4. Make elements and text more legible

One way to emphasize certain elements is to tune others back. In this case we want the body copy to play second fiddle to the subheads.

article p {
    color: scale-color($body-copy,30%);
}

There's no need to calculate the hex values. Let Sass do the math for you. Now let's do something to define the sections.

header, footer {
    background: scale-color($button-bg, $lightness: -40%);
    > .a {
        color: scale-color($button-bg, $lightness: -50%);
    }
}

The code above reveals the footer and header with dark blue backgrounds, while lightening their links for legibility. Two more complete the color treatment:

sidebar {
    background: scale-color($button-bg, $lightness: 70%);
}
body {
    background: scale-color($button-bg, $lightness 90%);
}

Maybe blue isn't your thing. Well. To each their own. Luckily with Sass it's easy to change. Remember those other colors we defined?

$background-color: #1078a0;

One quick edit, and your entire page changes. All of the shades stay exactly how they should.

$background-color: #808000;

When set up well, color functions with Sass make changing your entire project a snap. Just watch out for a final effect of these functions. Your co-workers who still use plain CSS will turn $jealous-color with envy.

---