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
- Define your colour variables as normal
- Define a descriptive variable and use the colour variable as the value
- 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:
// Colours | |
// All colour variable names should come from http://chir.ag/projects/name-that-color/ | |
$azure: #2C65AB; | |
$shamrock: #2ECC71; | |
$white: #FFFFFF; | |
$graychateau: #9CA1A4; | |
$tundora: #404040; | |
$mystic: #E9EDF2; | |
$botticelli: #CED8E4; | |
$alto: #DDDDDD; | |
$gallery: #EEEEEE; | |
$portafino: #FFFBB8; | |
$alabaster: #F8F8F8; | |
// Network colour variables should be named after their network | |
// Each name is also the class name to be applied | |
$network-colors: ( | |
twitter: #00ACED, | |
youtube: #CD201F, | |
pinterest: #CB2027, | |
github: #333333, | |
dribbble: #EA4C88, | |
instagram: #517FA4, | |
facebook: #3B5999 | |
); | |
// Search Colours | |
$search-color: $tundora; | |
$search-bg-hover: $azure; | |
$search-color-hover: $white; |
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:
$dre: 320px; | |
$diddy: 480px; | |
$jayz: 600px; | |
// Using breakpoint it’s as simple as | |
@include breakpoint( $dre ) { | |
width: 320px; | |
} |
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.
$beauty: 16px; | |
$bravery: 28px; | |
$brilliance: 51px; | |
$brutality: 90px; |
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.