A nice way to handle SASS color variables

After learning a lot of CSS and SASS techniques, methodologies and architectures for the past two years, I got to liked them.
Each of them can be applied depending on your project needs. A common factor among all of these is the way you can handle variable names and colors.

Let’s go back to the basics of SASS variables, as the official SASS site says:

“Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. SASS uses the $ symbol to make something a variable.”

(SASS-LANG official site)

We can create variables to store all the values we want, but for this blog post, I’m going to focus only on color variables.
Let’s suppose we have this CSS rule declaration for our main-container section:

.main-container {
  background-color: #f4f7f9;
}

And then we create more sections using the same background color:

.banners-container {
  background-color: #f4f7f9;
  ...more properties;
}

.another-container-with-the-same-background-color {
  background-color: #f4f7f9;
  ...more properties;
}

Disclaimer: I used that non-semantic class name just as an example.

At first glance, we spot a problem with the styles in the picture above if we keep using background colors like that, we are going to repeat the same hexadecimal value in all sections. So, what happens if we want to change the background color? Well, we have to replace the color in all the occurrences of the hexadecimal value. This is when variables come into action.

Using SASS variables to store colors

Let’s create a variable to store the background color and use it in our style declaration:

$primary-background-color: #f4f7f9;

.main-container {
  background-color: $primary-background-color;
}

.banners-container {
  background-color: $primary-background-color;
  ...more properties;
}

.another-container-with-the-same-background-color {
  background-color: $primary-background-color;
  ...more properties;
}

I chose $primary-background-color as a variable name because in this example I am targeting the #f4f7f9 as the main color of our project.

With this approach, it would be easier for us to change that value by replacing it in a single file. SASS will automatically replace it in all the occurrences when creating the CSS file.

Creating a colors file

It would be appropriate to create a colors file to put in those variable names because in our project we will be using more colors depending on the style guide or the color palette.

File

$primary-background-color: #f4f7f9;
$secondary-background-color: #27251f;
$primary-cta-background-color: #6195ed;
$primary-hover-cta-background-color: #000;

As we can see, I’ve accomplished having variables to store those hexadecimal colors and easily replace them when the values change. But again… what happens if we want to make those variable names reusable? Let’s use this example:

We have a button that uses the $primary-cta-background-color with a value of #fff, and we want to use the same color in a component called icon-container which is going to have a border with a different color but the background color is going to be the same (#fff):

$gold-border-color: #b99b67;

.icon-container {
  background-color: $primary-cta-background-color;
  border: 1px solid $gold-border-color;
}

Note:
I’ve created a new variable to store the border color ($gold-border-color)
Notice this line: background-color: $primary-cta-background-color;
Semantically speaking, this variable doesn’t make sense with the component we’re using. You may be thinking: A call to action (CTA) variable used in our icon-container? Well, that was not what I meant when I said reusable variable names.

A not acceptable practice would be to rename the $primary-cta-background-color to $primary-cta-and-border-color but as I said, this is not convenient. This is because I am using the same variable for multiple components because if one component color changes it will affect all the components using the same variable.

An accurate approach to solve this is separating the color name into a single variable and creating two variables to refer to the color name.

I use this helpful webpage http://chir.ag/projects/name-that-color/ to get a unique color name and create a variable using that name.

$cornflower-blue: #6195ed;
$primary-cta-background-color: $cornflower-blue;
$icon-container-background: $cornflower-blue;
$teak: #b99b67;
$icon-container-border: $teak;

.primary-cta {
  background-color: $primary-cta-background-color;
}

.icon-container {
  border: 1px solid $icon-container-border;
  background-color: $icon-container-background;
}

Let’s notice I’ve created variables for colors and also variables for components referring to the colors they are going to use.

I’ve refactored all the colors and components variables used in this post as shown in the next picture:

/* Colors */
$aqua-haze: #f4f7f9;
$black: #000;
$cornflower-blue: #6195ed;
$rangitoto: #27251f;
$teak: #b99b67;

/* Components */
$icon-container-background: $cornflower-blue;
$icon-container-border: $teak;
$primary-background-color: $aqua-haze;
$primary-cta-background-color: $cornflower-blue;
$primary-hover-cta-background-color: $black;
$secondary-background-color: $rangitoto;

Using this approach makes easier for us to look up for a color or to add or modify a component.

I’ve used this approach in several projects and it has worked for me, if this works for you that’s ok, but in this post I’m going to show you another and better approach.

Using color-based variables

I’ve found that using color-based variables comes in handy for developers and designers because in this way colors are simpler to maintain, i.e. we can add colors and sort them by hue and lightness.

The first thing to do after sorting them by hue and lightness is to give them names based on the color and brightness. It all depends on the design.
You may have greens, blues, yellows, reds, grays, and tanned colors, as I said… it all depends on the design.

In this example, I’m going to use a real palette in which I worked some time ago:

As you can see, those are perfectly separated and sorted, but I haven’t sorted them by hue and lightness yet.

In the image above the colors are now sorted by hue and lightness. The next step is to name them using 3-digit numbers because it becomes easier to insert new colors in between.

Notice how these components and color variables were created.
Now it’s easier if we want to add a new component and keep the semantic of our styles.

If you notice the number of your color variables has increased a lot, keep an eye on this and talk with the designer, it could be that the style guide is not well defined, for example, there is a lot of grays (as you can see in this post) that vary a little bit between each other.

Keep your color palette simple and consistent.

There are even more and more ways to handle colors using SASS; some developers just use the first technique I talked about at the beginning of this post, some people like to use HSL instead of hexadecimal values… if you have another really nice suggestion on this topic please let me know in the comments.

Hope you find this post useful,
See you next time!