Color Variables in SASS

If you’ve worked on a large development project, you’ve spent a great deal of time trying to choose semantic names for CSS properties and SASS variables.

Until CSS preprocessors came along, variables did not exist in CSS. There were only hex codes like #FFFFFF and #000000. They’d be scattered throughout your single, sprawling CSS file. When you wanted to switch everything from white to black, you’d find and replace #ffffff with #000000. Simple enough.

With variables, it gets more complicated.

Should I call it $color-red? Or $fill-red? Or $background-color? Should I store it in a variable? Would a SASS map be more appropriate?

Sound familiar?

So many questions when all you needed to do before was type #ffffff.

Color variables are hard to name

Color management has always been a pain point because:

  • Colors are already attached to names (blue, crimson, cyan, etc)
  • Colors are usually tied to specific types of content (links are blue, text is black etc.)
  • Colors tend to change frequently. What happens when the brand color changes from blue to red? You’ll end up with something insane like $color-blue: red;.
  • Colors often have many shades and tints that are hard to describe.

What Works

Choose variable names that work for YOU, the developer. Variable names that provide YOU with useful and memorable information.

Name your color variables like Crayola does crayons: in a human-readable format.

Do YOU know what mac-and-cheese yellow looks like? I sure do!

This is how I store colors in SASS variables:

$color-mac-and-cheese: #e8e759;
$color-royal-blue: #4444e4;
$color-turquoise-blue: #59e8b3;
$color-deep-blush: #e17582;

Extremely straightforward. Very effective.

You’re not going to forget $color-mac-and-cheese. You just won’t.

Best of all, you can use $color-mac-and-cheese for the page background or the link color or as the fill color for that noodle-shaped SVG you crafted. Your variable name isn’t tied to any specific context.

Why it’s effective

  • It’s memorable.
  • It doesn’t lock colors to a specific usage.
  • It solves the tints and shades problem by eliminating the concept altogether.
  • It’s descriptive. You know exactly what you’ll get.
  • It’s simple. No complex color scales or SASS maps.
  • It’s fun. I like to have fun.

Generating Color Names

Name that color is a nifty web app will help you choose memorable color names based on the hex values you provide.

When things change

Colors inevitably change over time. And the fix is simple! Open your favorite text editor and use find and replace like the good ’ol days.

Beware of this:

$color-charcoal: #ffffff; // Hex value for white

Charcoal ≠ white.

When a hex value changes significantly, you MUST update the variable name.

Many are already using this approach

  • Buzzfeed – A hybrid approach. A mix of color names (ex. $fill-red) and variable names that include basic context (ex. $text-gray).
  • Dropbox – I can’t speak for their SASS variables, but their color names follow this pattern. “Dropbox Blue”, for example.

What Doesn’t Work

I have tried every color naming scheme under the sun.

I started with simple color names:

$color-yellow: #e8e759;
$color-blue: #4444e4;
$color-grey: #59e8b3;
$color-pink: #e17582;

But the system broke down when I started to expand the palate:

$color-yellow: #e8e759;
$color-yellow-dark: #cccb1e;
$color-blue: #4444e4;
$color-blue-light: #8e8eec;
$color-blue-dark: #1818a5;
$color-blue-darkest: #0f0f6c;
$color-blue-extremely-dark: #080840;
$color-grey: #59e8b3;
$color-pink: #e17582;

Instead of choosing descriptive, memorable names, I was lazy and appended -dark or -light. No good.

When you have a variable named $color-blue-extremely-dark, your system is broken.

Next, I had the bright idea to start using SASS maps, resulting in the same problems with even more unnecessary abstraction.

$colors: (
  yellow: #e8e759,
  yellow-dark: #cccb1e,
  blue: #4444e4,
  blue-light: #8e8eec,
  blue-dark: #1818a5,
  blue-darkest: #0f0f6c,
  blue-extremely-dark: #080840,
  grey: #59e8b3,
  pink: #e17582,
);

Next, I switched courses entirely, choosing colors based on context and importance.

$colors: (
  primary: #e8e759,
  secondary: #cccb1e,
  tertiary: #4444e4,
  accent: #4444e4,
  inactive: #8e8eec,
  link: #1818a5,
  hover: #0f0f6c,
  active: #080840,
  focus: #59e8b3,
);

This was great until I wanted to use the link color as a background.

I abandoned the SASS map. And the context.

Next, I tried an abstract approach, using only numbering.

$color-1: #e8e759;
$color-2: #cccb1e;
$color-3: #4444e4;
$color-4: #8e8eec;
$color-5: #1818a5;
$color-6: #0f0f6c;
$color-7: #080840;
$color-8: #59e8b3;
$color-9: #e17582;

This actually worked really well! That is, until $color-37 came around.

How was anyone (especially a remote collaborator) supposed to know that $color-37 was indeed mac-and-cheese yellow?

Another nightmare.

I eventually came full circle, using simple variables and descriptive names.

I’ve used this approach on several projects and it has yet to fail me. I love it! I hope you do too.

Credit where it’s due

Throughout my color-naming struggles, my approach has been shaped by many great internet minds. In fact, many of the ideas in this post have been written about previously. I just wanted to share my personal experience and spread the good word about this approach.

This post was inspired by: