If you write CSS and you’re not using SASS & Compass yet, you should stop whatever you’re doing and go download Codekit right now. Do it, you’ll thank me later.

But if you’re already familiar with the awesomeness that is SASS, I’d like to share a small tip about handling color variables.

The CSS Way

First of all, just so we’re all on the same page, here’s how you’d use colors in plain old dumb CSS:

.myClass{
  color: #333333;
}
a{
  color: #001eff;
}

Simple enough. But the problem is that if I want to change a color, I usually have to change it in multiple places.

Variables to the Rescue

SASS lets us define reusable variables, which can be used for any type of value but are especially useful for colors:

// first we set the variables:
$darkgrey: #333333;
$lightblue: #001eff;

// now we can use them in our code:
.myClass{
  color: $darkgrey;
}
a{
  color: $lightblue;
}

This will work great… as long as your links are blue. What happens when you decide to make your links red instead of blue?

$darkgrey: #333333;
$lightblue: #ff0000; // not actually blue!

.myClass{
  color: $darkgrey;
}
a{
  color: $lightblue;
}

Our “$blue” color is now actually red! Nothing makes sense anymore!

Functional Variable Names

Thankfully there’s a simple solution: instead of using variable names that describe the color, we’ll use names that describe the color’s function.

$text_color: #333333;
$link_color: #001eff;

.myClass{
  color: $text_color;
}
a{
  color: $link_color;
}

Now we can change our link color without introducing any ambiguities in our code. Mission accomplished!

It Gets Tricky

But wait, what if I want to add a border, and to make sure my design stays harmonious I decide to make that border the same color as my links?

$text_color: #333333;
$link_color: #001eff;

.myClass{
  color: $text_color;
  border-color: $link_color; // insanity!
}
a{
  color: $link_color;
}

See the problem? Not only does it look weird, but what happens when I want to change the color of borders, but not links? I’ll have to manually edit my code once again, which is the problem we were trying to solve in the first place…

The Solution

The solution is actually pretty simple once you understand the problem. We’ll use a two-tier system, with both functional and descriptive variable names. Here’s what I mean:

// first we set descriptive variables:
$darkgrey: #333333;
$blue: #001eff;

// then we set functional variables:
$text_color: $darkgrey;
$link_color: $lightblue;
$border_color: $lightblue;

.myClass{
  color: $text_color;
  border-color: $border_color;
}
a{
  color: $link_color;
}

Want to make links red instead of blue, but without affecting the color of the borders? Not a problem!

$darkgrey: #333333;
$lightblue: #001eff;
$lightred: #ff0000; // set your new color…

$text_color: $darkgrey;
$link_color: $lightred; // …and use it here
$border_color: $lightblue;

.myClass{
  color: $text_color;
  border-color: $border_color;
}
a{
  color: $link_color;
}

So here you go. This is a simple tip, but I hope you’ll find it useful! And if you have another way of organizing your colors, or some other SASS/Compass tips, please share them in the comments or in the Hacker News thread!