Naming SaSS color variables

Written by on

Naming SaSS color variables has been a point of discussion for a long time and while everyone has their own approach, we decided there had to be a better soloution.

There are lots of approaches to naming variables and in most cases we encourage clear, readable variable names. With colors however it's not so simple. A common approach is to use numbers:

$color-1: rgba(255, 255, 255, 1);
$color-2: rgba(0, 130, 241, 1);

In first glance, this approach can make sense, because the point of a variable is it's interchangeable, however when we begin adding more and more colors to our site, which one is which? Was it $color-10 or $color-7, they don't mean anything.

So what about a different approach? Let's just name our colors by their most general names:

$white: rgba(255, 255, 255, 1);
$blue: rgba(0, 130, 241, 1);

Okay, now we can easily find the color's we're after right? Well yes and no... What happens if your design team decides they don't want $blue to be blue anymore, they want to change it to a deep red, no longer can you update $color-2 to a deep red, you have to find all the instances of blue in your codebase and update them to $red.

And what happens when our designers start throwing in all shades of Red? $dark-red, $light-red, $lightest-red... It can quickly become a mess.

Exploring other peoples workflows I saw something suggested again and again - Using a tool like: http://chir.ag/projects/name-that-color/, I could input my hex code and it would return the closest "Color name" match:

$white: rgba(255, 255, 255, 1);
$oxford-blue: rgba(48, 56, 74, 1);
$salmon: rgba(255, 148, 114, 1);
$link-water: rgba(221, 214, 243, 1);
$delta: rgba(176, 176, 175, 1);
$tundora: rgba(68, 68, 68, 1);
$flush-mahogany: rgba(197, 56, 79, 1);
$fruit-salad: rgba(93, 159, 75, 1);
$silver: rgba(199, 199, 199, 1);

This solved my "lighter", "lightest" issue, but my variables were even less interchangeable than before! And I quickly realised remembering which color was "Link water" and what color was "Tundora" was simply no clearer than using a numbered approach.

I was really no closer to finding a solution that worked for me, so I went back to the drawing board - I'd learnt I wanted the color names to be descriptive, I needed to know what they were, I also knew if they were to be descriptive I couldn't use the color variables directly in my SaSS styles. So I decided to take a slightly different approach. Using the color names was good, it gave a clear way to differentiate, however I simply couldn't remember what color was what... So to make it clearer I added a double underscore followed by a general color name to the variable. I also knew I didn't want these variables popping up to be used directly in my CSS styles so I prefixed my variables with an underscore leaving me with the following:

$_bright__white: rgba(255, 255, 255, 1);
$_oxford__blue: rgba(48, 56, 74, 1);
$_salmon__orange: rgba(255, 148, 114, 1);
$_link-water__lavender: rgba(221, 214, 243, 1);
$_delta__grey: rgba(176, 176, 175, 1);
$_tundora__charcoal: rgba(68, 68, 68, 1);
$_flush-mahogany__red: rgba(197, 56, 79, 1);
$_fruit-salad__green: rgba(93, 159, 75, 1);
$_silver__grey: rgba(199, 199, 199, 1);

Things were starting to make a bit of sense but I still didn't have anything I could use directly in my CSS, so I began to look at how my colors were used. I'd seen a lot of $primary-color, $secondary color etc, but my text primary color may be different from my buttons, so I decided to split my variables once more - Allowing me to reuse my variables set above while being clear in my SaSS stylesheets. This way I had a lot more control over my websites colors. Here was my final solution:

$_bright__white: rgba(255, 255, 255, 1);
$_oxford__blue: rgba(48, 56, 74, 1);
$_salmon__orange: rgba(255, 148, 114, 1);
$_link-water__lavender: rgba(221, 214, 243, 1);
$_delta__grey: rgba(176, 176, 175, 1);
$_tundora__charcoal: rgba(68, 68, 68, 1);
$_flush-mahogany__red: rgba(197, 56, 79, 1);
$_fruit-salad__green: rgba(93, 159, 75, 1);
$_silver__grey: rgba(199, 199, 199, 1);

//body
$color-body: $_bright__white;

//Text
$color-text-primary: $_tundora__charcoal;
$color-text-secondary: $_bright__white;
$color-text-highlight: $_salmon__orange;

//Buttons
$color-button-primary: $_salmon__orange;
$color-button-text-primary: $_bright__white;
$color-button-secondary: $_tundora__charcoal;
$color-button-text-secondary: $_bright__white;

We decided we wanted to work with "primary" and "secondary", however another approach could be:


//Text
$color-text-dark: $_tundora__charcoal;
$color-text-light: $_bright__white;
$color-text-highlight: $_salmon__orange;

//Buttons
$color-button-light: $_salmon__orange;
$color-button-text-light: $_bright__white;
$color-button-dark: $_tundora__charcoal;
$color-button-text-dark: $_bright__white;

By prefixing my color variables with "color-", I am able to quickly find my color variables using my editors predictive behaviour. I would also prefix fonts with "font-" for example.

  • Sass
  • Css
Three Bears - Web design and development
Loading