Sass !default and themeable design systems

This is a great blog post from Brad Frost where he walks us through an interesting example. Let’s say we’re making a theme and we have some Sass like this:

.c-text-input {
  background-color: $form-background-color;
  padding: 10px
}

If the $form-background-color variable isn’t defined then we don’t want the background-color to be outputted in our CSS at all. In fact, we want our output to look like this instead:

.c-text-input {
  padding: 10px;
}

See? No background-color property. As Brad shows, that’s possible today with Sass’s !default flag. You can use it like this as you’re setting up the variable:

$form-background-color: null !default;

.c-text-input {
  background-color: $form-background-color; /* this line won’t exist in the outputted CSS file */
  padding: 10px;
}

$form-background-color: red;

.c-text-input-fancy {
  background-color: $form-background-color; /* this line will be “red” because we defined the variable */
  padding: 10px;
}

It’s a really useful thing to remember if you want to ensure your CSS is as small as it can be while you’re creating complex themes with Sass.

Direct Link →