I’ve recently been working on a new boilerplate with the lads at work and I noticed that they have been using a clever little method to name their variable colours in SASS.

I have always done something like the following…

$standard: #333333;
$link: #d8544b;

a {color: $link;}
p {color: $standard;}

I’m now breaking it down into two steps and naming both functional and descriptive variable names for the colours. I’m using this wicked little site to obtain the colour names.

$col-mine-shaft: #333333;
$col-red-damask: #d8544b;

$col-standard: $col-mine-shaft;
$col-link: $col-red-damask;

a {color: $col-link;}
p {color: $col-standard;}

Why am I doing this?

The biggest issue was that my colour variable names don’t always make sense. Lets take a look at an example…

$link: #d8544b;

a {color: $link;}
.box {border: 1px solid $link;}

I need the link colour as my border but the variable name makes no sense as I’m adding the colour “link” as a border on a box. With my new technique I can split it up nicely like this.

$col-red-damask: #d8544b;

$col-link: $col-red-damask;
$col-box-border: $col-red-damask;

a {color: $col-link;}
.box {border: 1px solid $col-box-border;}

Not only does it look much nicer but if anything changes in the future then it’s much more maintainable!

Really simple bit of code but pretty useful I think. Cheers to and for the heads up on this one!

I’ve updated Base, you can check out the variable stylesheet here.

This video was featured by Webucator.

• CSS
• SASS
• Web Design