---
title: A Sass `!default` use case
teaser:
tags: sass,design
author: Edwin Morris
published_on: 2013-12-03
---

From the [Sass
documentation](http://sass-lang.com/documentation/file.Sass_REFERENCE.html#variable_defaults_):

> 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.