Using !default in Sass

Today I came across a cool keyword in a Sass file. It’s called ‘!default’. There was a variable declaration and then !default after it e.g.

$foo: 20px !default;

So, I decided to fine out what exactly it means. !default  means the variable will be set if it has not already been set. This way, you can declare project specific values of a variable first and then add the defaults after it.

Sources

1. A Sass `!default` use case. https://robots.thoughtbot.com/sass-default