Why Default values with !default in SASS? - Purpose & Use Cases

The Big Idea

What if your styles could adapt automatically without you rewriting code every time?

The Scenario

Imagine you are styling a website and want to set a color variable. You write $primary-color: blue; at the top of your file.

Later, you want to let others change this color without editing your file directly.

The Problem

If you just write $primary-color: blue; again, it will overwrite any previous value, making it hard to customize.

You might try commenting or deleting lines manually, which is slow and error-prone.

The Solution

Using !default lets you set a variable only if it hasn't been set before.

This means others can set their own value, and your default stays only if no value exists yet.

Before vs After

✗ Before

$primary-color: blue;
$primary-color: red;

✓ After

$primary-color: blue !default;
$primary-color: red;

What It Enables

This lets you create flexible stylesheets that others can easily customize without changing your original code.

Real Life Example

A theme library sets default colors with !default. Users can override colors in their own files without touching the library code.

Key Takeaways

Manually overwriting variables is slow and risky.

!default sets a variable only if it is not already set.

This makes stylesheets easier to customize and maintain.