Better SASS variables through abstraction

Using variables to handle colours, breakpoints and font-sizes is a great idea. You can even go so far as to use SASS Maps and mixins to generate classes dynamically. While it doesn’t have an effect on the what the end user will see, it makes you more efficient.

Anti-pattern

$red, $blue and $green all make sense as variable names but what if you then want to change the red to a black, what do you do? The $red variable name becomes disconnected with the value.

The same is true with media query breakpoints. $mobile, $tablet and $desktop don’t really make sense in the ever changing landscape of device sizes. Even $small, $medium and $large suffer the same issue as colours. What happens when you need to add a new breakpoint? $extra-small and $extra-large might be ok. What about $extra-medium?

Not to mention what happens with min-width, max-width and pixel density breakpoints.

Abstraction

Any series of names that have an obvious linear progression shouldn’t be used as SASS variable names; SASS variables should be value agnostic.

Colours

One way to handle the abstraction of colours is to use what I call a ‘two-layer variable’. I recently discovered that other people use this system too.

https://sachagreif.com/sass-color-variables/ https://davidwalsh.name/sass-color-variables-dont-suck

1. Define your colour variables as normal
2. Define a descriptive variable and use the colour variable as the value
3. Use the descriptive variable inside your SCSS partials

This makes it easy to swap out different colours while not having to worry too much about naming as you’re only replacing them in one file; you don’t have to find and replace in your whole app.

This is what that might look like:

Ever struggled naming your colours? Type the hex code into Name That Colour and use the name generated. Easy.

Breakpoints

Breakpoints are a tough one. I’ve used $bp1, $bp2, $bp3 etc. before which work well as you can still add to them and maintain their meaning. But $bp1-1 and $bp1-2 just aren’t as clean.

I decided to start using rapper names because breakpoints are kind of wrappers? Get it? Moving on…

Something like this:

You might think that the values are difficult to associate with the variable names but you should remember them after a few references in your stylesheet; or just flick back to your _vars.scss file until you do.

You can also use a little px to rem conversion utility to convert them to relative values:

$dre: u(320px);

I’m not advocating using current device sizes; it’s just an example. Add a new breakpoint where content breaks. Little and often.

Typography

I have used and contributed to Typeplate and like the way they handle their variable names; using the Greek alphabet. This too has a defined order, though, and as such no longer viable as they have an obvious hierarchy.

As any non-linear list of words is acceptable, how about types of abstract nouns? Or maybe some sports car names.

You can use any list you like really, as long as the theme is the same for each type of variable.

Pro tip: You can also use something like Gridlover to calculate your vertical rhythm using a modular scale.

TL;DR

When dealing with variables it’s best to abstract them using words that have no obvious linear progression.