Naming Sass Color Variables

Variables in SASS are supposed to make our lives easier. Why write a value over and over again when you can name it and re-use it, right? Plus, variables give us the ability to change the value once and have it applied everywhere it’s referenced. That’s just awesome.

But variables can get pretty messy, especially for sites that use a lot of colors. I’ve seen different approaches for naming color variables and want to share the process I use to ensure they stay organized and maintainable.

Keep Colors in a Partial

I like to keep all my colors in their own separate partial file. Give it a name like _colors.scss and keep it in a directory with other partials that make up the base of your app.

css
├── style.css
scss
├── base
│   ├── _colors.scss
│   ├── _config.scss
│   └── // etc.
└── style.scss

Then use this file to contain all of your colors:

// Color Variables
$red:   #f10e24;
$blue:  #0e0ef1;
$green: #2f9a00;

I find that keeping my colors in one place apart from other variables makes it easier to find them later.

Use Memorable Names

This sounds obvious, but use names you will remember. The names should describe the color in a way that makes sense if you were talking about it normal conversation.

For example, this:

// Color Variables
$brick:    #581207;
$lime:     #14e919;
$lavender: #ca90e5

…makes so much more sense than this:

// Color Variables
$color-1: #581207;
$color-2: #14e919;
$color-3: #ca90e5

What happens if you have different shades of the same color? I say stick to giving them memorable names:

// Red Color Variables
$blood:  #68121a;
$brick:  #581207;
$apple:  #fa041b;
$coral:  #e47f88;

Isn’t that so much nicer than this?

// Red Color Variables
$red-darkest: #68121a;
$red-darker:  #581207;
$red:         #fa041b;
$red-lighter: #e47f88;

You can use themes to make the colors even more memorable. I tend to name colors after foods because coding makes me hungry and that’s what’s on my mind. But you could use flowers, cartoon characters, gemstones, or anything else that makes sense to you.

Separate Types of Color

If the last example wasn’t a dead giveaway, I find it super helpful to group similar colors together. I like my colors like the food on my plate: not touching each other.

// Red Color Variables
$blood:     #68121a;
$brick:     #581207;
$apple:     #fa041b;
$coral:     #e47f88;

// Blue Color Variables
$midnight:  #2e3e5c;
$blueberry: #0067ac;
$dusk:      #5f6f8e;

Assign Variables to Functions

The worst scenario with color variables is this. Let’s say $blue is the primary color of your website, so you’ve used it all over your code.

// My site's primary color
$blue: #0e0ef1;

Then, one day, you (or some wishy-washy designer) decide to change the primary color from blue to orange.

You can’t rename your $blue variable, because then you have to change it everywhere else as well. You could just change the value, but then the variable name $blue doesn’t make sense.

Crap.

I’ve been able to avoid this situation by assigning colors to the function they serve, which looks something like this:

// Color Variables
$brick: #581207;
$lime:  #14e919;

// Color Configs
$primary-color:   $brick;
$secondary-color: $lime;

Now you can change your site’s color theme on a dime without sweating it.

Conclusion

Do these tips work every time? Of course not. I try not to be dogmatic in my approach to most things and that involves recognizing that not all sites are the same and that different approaches may need to be used for different situations.

However, I’ve found these tips for naming SASS color variables work for many of the sites I’ve not only built, but maintain as well.

Let me know if you’ve seen other approaches are have your own way of rolling with naming color variables.