How to Name Your Sass/Less Variables

These days, most of us use a CSS preprocessor, be it Sass, Less or something else. If you’re not, you should be! It is even possible to implement them in legacy applications which can benefit greatly from the file compression, improved load times, maintainability and improved user experience that CSS preprocessors offer.
One of the first problems you will face when using a preprocessor is how to name your variables. Doesn’t sound like much of a problem? Take the following scenario:

@blue: #0000FF;
a {
    color: @blue;
}
.className {
    border: @blue;
}

The above is a fairly typical example of how people use variables. On the face of it, everything looks fine. Both things want to be blue, the variable is descriptive and easy to understand. Everything works. However, now you decide you need to change the colour to red. This should be easy:

@blue: #FF0000; // not blue!

Ah, well that doesn’t seem like a very good idea. Surely there is a better way to do this!
Enter, functional naming. Instead of using variables that describe their contents, use variables that describe their function.

@link-color: #0000FF;
@border-color: #FF0000;
a {
    color: @link-color;
}
.className {
    border: @border-color;
}

Now we can update the border colour or link colour without worrying about incorrectly named variables. This seems to have fixed our problem.
But now we have a new problem:

@link-color: #0000FF;
@border-color: #FF0000;
a {
    color: @link-color;
}
.className {
    border: @border-color;
    color: @border-color;
}

Oh dear, that can’t be right…
Setting a text colour to a variable named border-color isn’t very readable, or maintainable. We need to combine both of the above techniques together to produce bullet proof variable names that are both maintainable and readable.

@blue: #0000FF;
@red: #FF0000;
@link-color: @blue;
@text-color: @red;
@border-color: @red;
a {
    color: @link-color;
}
.className {
    border: @border-color;
    color: @text-color;
}

By setting up descriptive variable names at the start and using them to create functional variables we have solved both problems.
Now if you want to change the text colour you can easily do so with a new descriptive variable:

@blue: #0000FF;
@red: #FF0000;
@green: #00FF00;
@link-color: @blue;
@text-color: @green;
@border-color: @red;
a {
    color: @link-color;
}
.className {
    border: @border-color;
    color: @text-color;
}

Minimal effort, no need to edit your actual CSS, just a quick change to your variables and you can change the colours across your entire site while keeping readable and maintainable variable names throughout.
Be very clear when naming your initial descriptive variables and particularly colour variables. It’s easy in large projects to find yourself in a situation where you have ten different greys named something like:

@light-grey: #a6a6a6;
@grey: #595959;
@darkish-grey: #444444;
@dark-grey: #363636;
@darker-grey: #303030;
@darkest-grey: #292929;
@darkerer-grey: #191919;
@darkerest-grey: #111111;

Naming variables using light- and dark- seems like a good idea to start with, but as shown above can quickly become messy and difficult to maintain. (Although if you need 8 different shades of greys I would consider having a word with your designer!)
A great solution is to use this handy little tool for generating colour variable names. The names won’t mean anything more to you than “darkerer-grey” does, but at least they will readable.
In the time I have been teaching this methodology, I have had a lot of people ask me how to quickly distinguish what colour a particular variable is, after all @link-color doesn’t exactly tell you much.
There is a really simple solution to this and you can do it straight from your IDE. PHPStorm and a few other popular IDEs will display a small example of the colour in the line gutter (although I haven’t seen this feature in any Sublime plugin yet).
This means you can quickly see what colour you are dealing with – there’s no need to click into your variables file and do a find on the variable name, the colour is there for you!