Sass variable madness – Are we using too many variables in Sass?

Variables are an unmistakably important part of Sass, they open up a whole world of semantic reusable code that makes our lives easier when authoring css.  But are we using too many of them just because they are there?

Learning Sass

At the first stage of learning sass, you learn that you can @import partials, nest code, and use variables. In fact, aside from the introduction to preprocessing, sass-lang.com uses variables as their first introduction to the language. So we get our grubby hands on them and say “Hey! we can use them for everything now!!” like a kid in a candy store.  But are we over-using them or using them correctly?  Sometimes too much candy can make us sick.

 What makes me think we are over-using sass variables?

Sometimes if I see a variable that is too specific, i start to wonder why it is there. Like padding values for elements or specific colours like $pink or even worse; $sidebar-text-colour.

Are we using variables to be semantically pleasing or are we using them for functionality and time saving? While semantically pleasing code can be helpful, I believe that functionality should come before readability. If code is documented as per backend dev work, this can be pretty easily overcome. and with sass using // for comments rather than /* this */ it is easier than ever to document your code.

Sass variables for functionality and re-use

The example of $pink is probably going to be a bit heat, so I will explain my thoughts behind it.

First of all, the question I pose to myself is “Am I going to use this more than twice?”. If the answer is yes, then I will ask myself  “Can this be declared as a class and added to the html elements classes?” (like a grid system). If the answer is no, I will most likely use it as a variable.

In the case of $pink, the ongoing argument amongst the community is that on one side, semantic coding is good and readable, while on the other side people are asking what is the point if you change everything pink to green?

My solution to colour variables would be to use $colour-1, $colour-2 etc… and use some documentation to explain what it is used for.


// colour-1 is the green in the header and on h2 tags

$colour-1: #8AB541;

The benefit of this is that we start behaving less like designers and more like developers when it comes to authoring css. I believe this is good because we aren’t tied to a specific colour or value and we could even take it a step further and start working with lists.

Here’s what I did with the sassycolours loop example which i used to give a monochromatic palette for each value outputted by the triad palette

$base-colour: #7ea7d8

$scheme: 'triad';
$colour: sassycolours($base-colour, $scheme);

@for $i from 1 through 5{

$palette: sassycolours(nth($colour, $i), 'mono');

@for $c from 1 through 5{

.set-#{$i}-#{$c}{

background-color: nth($palette, $c);

}

}

}

which created the following css

.set-1-1 { background-color: #7ea7d8; }

.set-1-2 { background-color: #b0c7e3; }

.set-1-3 { background-color: #c8d7ea; }

.set-1-4 { background-color: #dfe7f2; }

.set-1-5 { background-color: #f5f7fa; }

.set-2-1 { background-color: #4d698a; }

.set-2-2 { background-color: #6f87a4; }

.set-2-3 { background-color: #8597ad; }

.set-2-4 { background-color: #9aa7b7; }

.set-2-5 { background-color: #aeb7c1; }

.set-3-1 { background-color: #a7d87e; }

.set-3-2 { background-color: #c7e3b0; }

.set-3-3 { background-color: #d7eac8; }

.set-3-4 { background-color: #e7f2df; }

.set-3-5 { background-color: #f7faf5; }

.set-4-1 { background-color: #698a4d; }

.set-4-2 { background-color: #87a46f; }

.set-4-3 { background-color: #97ad85; }

.set-4-4 { background-color: #a7b79a; }

.set-4-5 { background-color: #b7c1ae; }

.set-5-1 { background-color: #d87ea6; }

.set-5-2 { background-color: #e3b0c6; }

.set-5-3 { background-color: #eac8d7; }

.set-5-4 { background-color: #f2dfe7; }

.set-5-5 { background-color: #faf5f7; }

This might be a bit excessive, but it can work really well with developers who have complex colour requirements such as graphs or anything else that needs unique colour coding etc…

Another great use for variables is maths. This is where sass really shines. I will save that for another post though.

Leave a Reply