One of the basic uses of Sass is the ability to create re-usable global variables in your Sass files. One place this has come in particularly useful is with colours. It allows us to define our projects’ colour schemes in one place. We can then re-use that same variable throughout our project in various other Sass files, helping to keep colour consistent.
The general consensus is that the best way to name our colour variables is not by colour name but rather by a name that will not change. Because, of course, if we name our variable after it’s colour, what’s to say we won’t be changing that colour to something else later on. If we do this then we have to change that variable name everywhere. In other words it’s a less maintainable solution. It is better to define the colour in one place and abstract the colour into a solid non-changing variable name.
Something like this:
$primarycolor: #A90E0E;
or even
$darkred: #A90E0E;
$primarycolor: $darkred;
Now in all the other Sass files where we wish to use this colour we can simply say something like:
color: $primarycolor;
Even if we change our colour to something else, we will not have to change these references to $primarycolor. Only our one instance of $darkred back in our colour file will need to change.
Okay so here is the problem.
I spend most of my time deep inside various Sass files when building a website. I have lost count of the amount of time I spend going from one Sass file back to the colour file asking myself questions like:
“what colour is $primarybackground again!?” “Is the $tertiarycolor the green or the blue one!?”
“I thought this abstraction lark was supposed to make my life easier!”
My Solution? Ditch the vague variable names – commit to colour!
Nowadays my colour Sass looks like this. Now I have brought it to the next level using Sass Maps but essentially I’m still doing the same thing. Throughout my Sass files you will see lines like:
color: palette(green, light);
But if I didn’t use Maps I could just as easily have this:
color: $lightgreen;
But what if I decide to change the colour I hear you shout! Well yes, it’s true that I have variables such as the above peppered throughout my sass files. But, if I do need to change them (which is very seldom I might add) – I go into my colour Sass file and change the colour of the original variable to something else. I then give it a more appropriate name like $xdarkyellow or whatever best describes the colour.
Finally I bring up the ‘find and replace’ dialog. I enter in the old variable and replace it with the new. I click ‘replace all’ and that’s that! Any editor worth it’s salt should have this functionality.
So, while other developers are wasting time trying to figure out what colour $secondarylinkcolor is I’m off admiring my descriptive colour variable $lightpink!
What do you Sass or Less users out there think of this solution. Do you, like me, believe that abstraction and maintainability is more of a hindrance than a help in the case of Sass colour!?