Naming Sass Color Variables

May 20, 2014

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.

[[code class="language-scss"]]czoxNTU6XCJjc3MNCuKUnOKUgOKUgCBzdHlsZS5jc3MNCnNjc3MNCuKUnOKUgOKUgCBiYXNlDQrilIIgICDilJzilIDilIAgX2NvbG97WyYqJl19cnMuc2Nzcw0K4pSCICAg4pSc4pSA4pSAIF9jb25maWcuc2Nzcw0K4pSCICAg4pSU4pSA4pSAIC8vIGV0Yy4NCuKUlOKUgOKUgCBzdHtbJiomXX15bGUuc2Nzcw0KXCI7e1smKiZdfQ==[[/code]]

Then use this file to contain all of your colors:

[[code class="language-scss"]]czo3NDpcIi8vIENvbG9yIFZhcmlhYmxlcw0KJHJlZDogICAjZjEwZTI0Ow0KJGJsdWU6ICAjMGUwZWYxOw0KJGdyZWVuOiAjMmY5YTB7WyYqJl19MDsNClwiO3tbJiomXX0=[[/code]]

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:

[[code class="language-scss"]]czo4MjpcIi8vIENvbG9yIFZhcmlhYmxlcw0KJGJyaWNrOiAgICAjNTgxMjA3Ow0KJGxpbWU6ICAgICAjMTRlOTE5Ow0KJGxhdmVuZGV7WyYqJl19cjogI2NhOTBlNQ0KXCI7e1smKiZdfQ==[[/code]]

…makes so much more sense than this:

[[code class="language-scss"]]czo3OTpcIi8vIENvbG9yIFZhcmlhYmxlcw0KJGNvbG9yLTE6ICM1ODEyMDc7DQokY29sb3ItMjogIzE0ZTkxOTsNCiRjb2xvci0zOiB7WyYqJl19I2NhOTBlNQ0KXCI7e1smKiZdfQ==[[/code]]

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

[[code class="language-scss"]]czoxMDA6XCIvLyBSZWQgQ29sb3IgVmFyaWFibGVzDQokYmxvb2Q6ICAjNjgxMjFhOw0KJGJyaWNrOiAgIzU4MTIwNzsNCiRhcHBsZTp7WyYqJl19ICAjZmEwNDFiOw0KJGNvcmFsOiAgI2U0N2Y4ODsNClwiO3tbJiomXX0=[[/code]]

Isn’t that so much nicer than this?

[[code class="language-scss"]]czoxMjA6XCIvLyBSZWQgQ29sb3IgVmFyaWFibGVzDQokcmVkLWRhcmtlc3Q6ICM2ODEyMWE7DQokcmVkLWRhcmtlcjogICM1ODEyMDd7WyYqJl19Ow0KJHJlZDogICAgICAgICAjZmEwNDFiOw0KJHJlZC1saWdodGVyOiAjZTQ3Zjg4Ow0KXCI7e1smKiZdfQ==[[/code]]

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.

[[code class="language-scss"]]czoyMDU6XCIvLyBSZWQgQ29sb3IgVmFyaWFibGVzDQokYmxvb2Q6ICAgICAjNjgxMjFhOw0KJGJyaWNrOiAgICAgIzU4MTIwNzsNCiR7WyYqJl19YXBwbGU6ICAgICAjZmEwNDFiOw0KJGNvcmFsOiAgICAgI2U0N2Y4ODsNCg0KLy8gQmx1ZSBDb2xvciBWYXJpYWJsZXMNCiRtaWRuaXtbJiomXX1naHQ6ICAjMmUzZTVjOw0KJGJsdWViZXJyeTogIzAwNjdhYzsNCiRkdXNrOiAgICAgICM1ZjZmOGU7DQpcIjt7WyYqJl19[[/code]]

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.

[[code class="language-scss"]]czo0NTpcIi8vIE15IHNpdGVcJ3MgcHJpbWFyeSBjb2xvcg0KJGJsdWU6ICMwZTBlZjE7DQpcIjt7WyYqJl19[[/code]]

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:

[[code class="language-scss"]]czoxMjk6XCIvLyBDb2xvciBWYXJpYWJsZXMNCiRicmljazogIzU4MTIwNzsNCiRsaW1lOiAgIzE0ZTkxOTsNCg0KLy8gQ29sb3IgQ297WyYqJl19bmZpZ3MNCiRwcmltYXJ5LWNvbG9yOiAgICRicmljazsNCiRzZWNvbmRhcnktY29sb3I6ICRsaW1lOw0KXCI7e1smKiZdfQ==[[/code]]

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.

Additional Resources: