SASS Color Variables for Better CSS Management

If you’ve ever used SASS (or LESS) you’ve probably explored the power of variables. Today we’re going to talk about a sustainable approach for color management using SASS.

First, let’s discuss why this is needed. Many websites and applications today use a good deal of color in their stylesheets. After all, color makes the world more exciting! With all this color comes a need for management and organization, especially for larger sites and apps. Otherwise you could find yourself in a mess of color – i.e. hundreds of hex values floating around with 10-20 different variations of one hue (ex: orange). This really happens, believe me. Especially when multiple designers are involved in a large scale projects.

By using SASS color variables, you’ll cut down on the time and overhead involved with color picking and management. It will change the way you code color in your stylesheets, and help the entire team work faster and more efficiently. Why? Because it relies on math, not human decision making. Let me elaborate…

Step 1: Define your Color Variables

First, let’s start off with a simple example of a SASS variable:

$green: #690;

This is assigning the hex value of #690 to a variable called $green. Pretty straightforward. Now I can use $green anywhere in my stylesheet that I would have normally used #690. More importantly, if I decide to change the color I only have to change it in one place, instead of manually changing every instance of #690 throughout the stylesheet.

Now let’s add a few more colors into the mix – we’ll run with a green/orange/purple tertiary color scheme:

$green: #690;
$orange: #f60;
$purple: #63c;

Step 2: Create Color Variations

In most cases, 3 colors just won’t cut it. So we’re going to create some light/dark variations of each color to give our site more color depth. To do this we’ll use the SASS lighten() and darken() methods. These are very helpful and powerful SASS tools, which I use throughout my projects for color variations, instead of manually picking lighter/darker hex values. Our updated color variables will look something like this:

$green: #690;
$green-light: lighten($green, 50%);
$green-dark: darken($green, 20%);

$orange: #f60;
$orange-light: lighten($orange, 50%);
$orange-dark: darken($orange 20%);

$purple: #63c;
$purple-light: lighten($purple, 50%);
$purple-dark: darken($purple, 20%);

Now I know what a lot of you are thinking – “Wait a second… that won’t work! My designers pick out the colors and send them to me. I can’t make decisions on what light green and dark purple are supposed to be!” If that’s the case, then use your designer’s color variations instead of my lighten/darken methods. However, you can use this article to explain to them that my method uses math, which is exact (ex: based on % difference of the same hue). There method uses human eye, which is subjective. Either way, we now have a nice color palette to use throughout our stylesheet.

Step 3: Defining your Descriptive Variables

Next, we’re going to create what I call “descriptive variables.” These are variables that represent UI guidelines or descriptions contextual to your project. For example – colors that relate to CTA’s (call-to-actions), or branding and marketing. These are used to keep consistency in your color usage, and they will reference some of the colors we’ve already defined. Example below:

/* color variables */
$green: #690;
$green-light: lighten($green, 50%);
$green-dark: darken($green, 20%);

$orange: #f60;
$orange-light: lighten($orange, 50%);
$orange-dark: darken($orange 20%);

$purple: #63c;
$purple-light: lighten($purple, 50%);
$purple-dark: darken($purple, 20%);

/* descriptive variables */
$color-brand: $green;
$color-primary: $orange;
$color-secondary: $purple;
$color-cta: $green;

Now we have variables that we can use throughout our stylesheet for things like links, headers, backgrounds, borders, etc. Below is an example of how these variables would play into your styles:

.header {
	background: $color-brand;
	height: 40px;
	padding: 10px 0;
	.header-brand {
		color: #fff;
		background: darken($color-brand, 15%); 
	}
}

.cta-button {
	display: inline-block;
	padding: 10px 20px;
	background: $color-cta;
	color: #fff;
	border: 2px solid lighten($color-cta, 15%);
	&.button-orange {
		background: $orange;
	}
	&.button-purple {
		background: $purple;
	}
}

.hero {
	background: $color-primary;
	width: 100%;
	padding: 100px 0;
}

Let’s say your boss comes in one day and says, “You know what, we should change our primary color to purple.” Instead of shaking your head in frustration because of the time it would take to update your non-variable stylesheet, you quickly reply with, “No problem!” All you have to do is change the $color-primary variable to $purple, which takes 5 seconds, and then every usage of $color-primary throughout the stylesheet updates. Then your boss gives you a raise because of how fast and organized you are 🙂

Conclusion

Color management may not seem like a huge problem for every project, especially smaller ones. However, this is a prime example of how tools like SASS and LESS can be leveraged to keep your CSS more organized and flexible. The same tactics I showed above can be used for fonts, margins, and anything else that relates to UI decision making. Give it a try. It will truly change the way you code!

Author

Ali Jafarian

Ali is a father, husband and serial entrepreneur with a deep drive to create. He writes, records, codes and builds things to inspire the artist in all of us.