Default values with !default in SASS - Deep Dive

Overview - Default values with !default

What is it?

In Sass, the !default flag lets you set a variable only if it hasn't been set before. It means you can provide a fallback value that won't overwrite an existing one. This helps when you want to allow users or other parts of your code to customize variables without losing your defaults. It's like saying, "Use this value unless someone else already chose one."

Why it matters

Without !default, variables get overwritten every time they are declared, making it hard to customize styles safely. This would force you to change core files or duplicate code to adjust values. With !default, you can create flexible, reusable stylesheets that adapt to different needs without breaking. It makes sharing and maintaining code easier and less error-prone.

Where it fits

Before learning !default, you should understand basic Sass variables and how they work. After mastering !default, you can explore Sass modules and how to organize variables across files. This concept fits early in Sass customization and theming workflows.

Mental Model

Core Idea

The !default flag sets a variable only if it is not already set, allowing safe fallback values.

Think of it like...

It's like putting a sticky note on a desk that says 'Use this pen if no one else has taken one.' If someone already grabbed a pen, you don't replace it.

┌───────────────┐
│ Variable check│
├───────────────┤
│ Is variable   │
│ already set?  │
├───────┬───────┤
│ Yes   │ No    │
│       │       │
│ Keep  │ Set   │
│ value │ value │
└───────┴───────┘

Build-Up - 7 Steps

1

Foundation

Understanding Sass Variables

Concept: Learn what Sass variables are and how to assign values.

In Sass, variables store values like colors or sizes. You create them with a $ sign, for example: $color: blue;. You can then use $color in your styles instead of writing 'blue' everywhere.

Result

You can reuse $color in your styles, making changes easier and faster.

Knowing variables lets you write flexible styles that are easy to update.

2

Foundation

Variable Overwriting Basics

Concept: See what happens when you assign a variable multiple times.

If you write $color: blue; and later $color: red;, the second value replaces the first. Sass uses the last assigned value when compiling.

Result

The final $color is red, overwriting blue.

Understanding overwriting helps you realize why controlling variable assignment order matters.

3

Intermediate

Introducing !default Flag

🤔Before reading on: do you think !default overwrites existing variables or preserves them? Commit to your answer.

Concept: Learn how !default sets a variable only if it is not already set.

When you write $color: blue !default;, Sass checks if $color exists. If it does, Sass keeps the existing value. If not, it sets $color to blue. This prevents accidental overwriting.

Result

Variables with !default act as fallback values.

Knowing !default lets you write safer, customizable code that respects previous settings.

4

Intermediate

Using !default for Theme Customization

🤔Before reading on: do you think !default can help users change colors without editing core files? Commit to your answer.

Concept: Use !default to provide default theme values that users can override.

You can write $primary-color: blue !default; in your theme file. If a user sets $primary-color: green; before importing your file, their green stays. Otherwise, blue is used.

Result

Themes become flexible and user-friendly.

Understanding this pattern empowers you to build reusable, customizable stylesheets.

5

Intermediate

Order of Variable Declarations Matters

🤔Before reading on: does the position of !default variables affect which value is used? Commit to your answer.

Concept: Learn how Sass processes variables top to bottom, affecting !default behavior.

If you set $color: red; after $color: blue !default;, the final $color is red. But if $color: red; is before, blue !default; won't overwrite it. The first set value sticks.

Result

You control variable values by ordering declarations correctly.

Knowing declaration order prevents bugs where defaults unexpectedly override custom values.

6

Advanced

Combining !default with Modules and Imports

🤔Before reading on: do you think !default works the same with Sass modules as with plain imports? Commit to your answer.

Concept: Explore how !default behaves in Sass modules and import systems.

In Sass modules, variables are private by default. Using !default in a module sets fallback values inside that module. To override, you must set variables before importing the module or use module configuration features.

Result

You can create configurable modules with safe defaults.

Understanding module scope and !default interaction is key for scalable Sass architecture.

7

Expert

Surprising Behavior with !default and Null Values

🤔Before reading on: does !default set a variable if it is already set to null? Commit to your answer.

Concept: Discover how !default treats variables set to null as 'set' and does not overwrite them.

If $color: null; is set, then $color: blue !default; will NOT overwrite it. Sass treats null as a value, so !default skips setting the fallback. This can cause unexpected results if you expect null to mean 'unset'.

Result

Variables set to null block !default fallback values.

Knowing this prevents subtle bugs where null blocks defaults, helping you write more predictable Sass.

Under the Hood

When Sass compiles, it keeps track of which variables have been assigned. The !default flag tells the compiler to check if a variable exists before setting it. If the variable is already defined (even if null), Sass skips the assignment. This check happens during the compilation phase, ensuring that the first set value remains unless explicitly changed later.

Why designed this way?

!default was created to allow library authors to provide safe default values without forcing users to edit core files. It balances flexibility and safety, avoiding accidental overwrites while enabling customization. Alternatives like always overwriting or requiring manual checks were error-prone and less user-friendly.

┌───────────────┐
│ Sass Compiler │
├───────────────┤
│ Reads variable│
│ declaration   │
├───────────────┤
│ Has variable? ├──No──> Set value
│               │
│               └──Yes─> Skip if !default
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does !default overwrite variables set to null? Commit yes or no.

Common Belief: !default always sets the variable if the value is null.

Reality: !default does NOT overwrite variables already set to null because Sass treats null as a set value.

Why it matters: This can cause unexpected styling issues when null is used to reset variables but !default fallback values don't apply.

Quick: Can you override a !default variable by declaring it after? Commit yes or no.

Common Belief: !default variables cannot be overridden once set.

Reality: Variables declared after a !default variable without !default will overwrite it because Sass uses the last assignment.

Why it matters: Misunderstanding this leads to confusion about which value is used and can cause bugs in styles.

Quick: Does !default work the same in Sass modules as in plain files? Commit yes or no.

Common Belief: !default behaves identically in all Sass contexts.

Reality: !default respects module scope; variables inside modules are private and require different override strategies.

Why it matters: Ignoring module scope can cause failed overrides and harder-to-maintain code.

Quick: Is !default a way to set variables that always override user settings? Commit yes or no.

Common Belief: !default forces variables to a default value no matter what.

Reality: !default only sets variables if they are not already set, preserving user or prior values.

Why it matters: Misusing !default can lead to overwriting user customizations unintentionally.

Expert Zone

1

Variables set to null block !default fallback values, which can be used intentionally to disable defaults.

2

The order of imports and variable declarations critically affects which values !default applies to, especially in large projects.

3

In Sass modules, !default works within module scope, so overriding defaults requires setting variables before module import or using module configuration.

When NOT to use

Avoid using !default when you need to guarantee a variable's value regardless of prior settings. Instead, assign variables without !default or use Sass functions to enforce values. Also, in complex module systems, prefer explicit configuration over relying solely on !default.

Production Patterns

In production, !default is commonly used in design systems and component libraries to provide theme variables that users can override. It enables safe customization without modifying core files. Teams combine !default with Sass modules and configuration maps for scalable, maintainable styling.

Connections

Dependency Injection (Software Engineering)

Both provide default values that can be overridden by external input.

Understanding !default as a form of dependency injection helps grasp how code can be flexible and configurable without hardcoding values.

Fallback Mechanisms in Networking

Both use fallback options when preferred values or paths are unavailable.

Seeing !default as a fallback mechanism clarifies its role in providing safe defaults that activate only when no other value exists.

Inheritance in Object-Oriented Programming

Both involve default behaviors or values that can be overridden by subclasses or later declarations.

Recognizing !default as similar to inheritance helps understand how styles cascade and can be customized.

Common Pitfalls

#1 Expecting !default to overwrite variables set to null.

Wrong approach:

$color: null;
$color: blue !default;

Correct approach:

$color: null !default;
$color: blue !default; // or avoid setting null if fallback needed

Root cause:

Misunderstanding that null counts as a set value, so !default skips assignment.

#2 Declaring !default variables after user overrides expecting them to apply.

Wrong approach:

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

Correct approach:

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

Root cause:

Not realizing Sass uses the last assignment, so order controls which value wins.

#3 Trying to override !default variables inside Sass modules without setting variables before import.

Wrong approach:

@use 'module' with ($color: red); // incorrect if variable is private and !default inside module

Correct approach:

$color: red;
@use 'module'; // set before import to override !default

Root cause:

Ignoring module scope and import timing rules.

Key Takeaways

!default in Sass sets variables only if they are not already assigned, enabling safe fallback values.

The order of variable declarations and imports affects which values !default applies to, so declaration order matters.

Variables set to null are considered assigned and block !default from setting fallback values.

!default is essential for building customizable, reusable stylesheets and design systems.

Understanding !default's behavior in Sass modules is key for scalable and maintainable code architecture.