From the Sass documentation:
You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.
This is what it looks like:
$example: 'value' !default;
So using Sass !default is like adding an “unless this is already assigned”
qualifier to your variable assignments. But what’s the use case for this?
Example: custom styles for a white label app
Recently, a client asked us to create a white label app: they wanted their customers to be able to customize things like colors, logo, background, etc., but to have fallbacks for customers who wouldn’t use custom branding. How do you handle this with Sass? Let’s step through it.
First, all of these customizable parts are defined in variables.
$brand: company-name;
$brand-color: #0074BE;
$brand-color-alt: #E2EAF2;
$brand-background-1: hsla(0, 0%, 97%, 1.0);
$brand-background-2: transparent;
The variable names are broad enough to use for any customer. If a company doesn’t customize anything, this is what they get.
For each customer, we’ll create a file with their custom variables. It will use the same variable names, but replace the values. Normally to override variables, you have to define the new value below the original value:
$var_name: 'val';
$var_name: 'new val';
With !default, it’s the other way around: we include the brand specific SCSS
file first, then we add !default at the end of all our default brand values.
This is what our fallback variables look like now:
$brand: company-name !default;
$brand-color: #0074BE !default;
$brand-color-alt: #E2EAF2 !default;
$brand-background-1: hsla(0, 0%, 97%, 1.0) !default;
$brand-background-2: transparent !default;
Optimization
If every client has a customized stylesheet with at least their company name,
we need uniquely named files for each of them since client-name-1.scss will
live in the same directory as client-name-2.scss.
Files included for client-name-1’s account:
@import 'client-1-overrides';
@import 'base-variables';
@import 'header';
@import 'body';
@import 'footer';
To reduce repeated code, we take all of the general imports after our overrides
and move them into _application.scss.
Files included for client-name-1’s account:
@import 'client-1-overrides';
@import 'application';
So, we’ve used !default to define the actual default values, and we’ve
overridden them with brand specific values where needed.
What’s next
If you found this useful, you might also enjoy:
