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.

Practice

1. What does the !default flag do when used with a Sass variable?

easy

A. It makes the variable global regardless of scope.

B. It sets the variable only if it has not been set before.

C. It deletes the variable after use.

D. It forces the variable to always overwrite previous values.

Solution

1. Step 1: Understand the purpose of !default

   The !default flag in Sass is used to assign a value to a variable only if it has not been assigned a value before.

2. Step 2: Compare with other options

   The other options describe behaviors that !default does not perform. It does not make the variable global regardless of scope, force overwrites of previous values, or delete the variable after use.

3. Final Answer:

   It sets the variable only if it has not been set before. -> Option B

4. Quick Check:

   !default means set if unset [OK]

Hint: Remember: !default sets only if variable is unset [OK]

Common Mistakes:

• Thinking !default always overwrites values
• Confusing !default with variable scope
• Assuming !default deletes variables

2. Which of the following is the correct syntax to assign a default value of blue to a Sass variable $color?

easy

A. $color: blue !important;

B. $color: blue;

C. $color = blue !default;

D. $color: blue !default;

Solution

1. Step 1: Recall Sass variable assignment syntax

   Sass variables are assigned using $variable-name: value;. To set a default value, add !default after the value.

2. Step 2: Check each option

   $color: blue; assigns a value but does not use !default. $color: blue !default; correctly uses !default. $color = blue !default; uses an invalid assignment operator =. $color: blue !important; uses !important which is CSS, not Sass variable syntax.

3. Final Answer:

   $color: blue !default; -> Option D

4. Quick Check:

   Correct syntax uses colon and !default [OK]

Hint: Use colon and !default to set default Sass variables [OK]

Common Mistakes:

• Using = instead of : for variable assignment
• Confusing !default with !important
• Omitting !default when intending default value

3. Given the following Sass code, what will be the value of $font-size after compilation?

$font-size: 16px !default;
$font-size: 18px;

medium

A. 18px

B. 16px

C. Error: Duplicate variable assignment

D. Undefined

Solution

1. Step 1: Understand the effect of !default on first assignment

   The first line sets $font-size to 16px only if it is not already set. Since it is the first assignment, it sets $font-size to 16px.

2. Step 2: Analyze the second assignment without !default

   The second line assigns $font-size to 18px unconditionally, overwriting the previous value.

3. Final Answer:

   18px -> Option A

4. Quick Check:

   Later assignment overwrites default [OK]

Hint: Later assignments override !default values [OK]

Common Mistakes:

• Assuming !default prevents any overwrite
• Thinking duplicate assignments cause errors
• Ignoring order of variable declarations

4. Identify the error in the following Sass code snippet:

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

medium

A. Cannot assign two values to the same variable.

B. Incorrect use of !default flag.

C. Missing semicolon after first variable declaration.

D. Variables must be declared inside a selector.

Solution

1. Step 1: Check syntax of variable declarations

   In Sass, each variable declaration must end with a semicolon. The first line is missing a semicolon after !default.

2. Step 2: Verify other options

   Assigning two values to the same variable is allowed; the later overwrites the earlier. The use of !default is correct. Variables can be declared globally, not only inside selectors.

3. Final Answer:

   Missing semicolon after first variable declaration. -> Option C

4. Quick Check:

   Every Sass statement ends with semicolon [OK]

Hint: Always end Sass variable lines with semicolon [OK]

Common Mistakes:

• Omitting semicolon after !default
• Thinking multiple assignments cause errors
• Believing variables must be inside selectors

5. You want to create a Sass file that allows users to override a default button color. Which code snippet correctly uses !default to achieve this?

hard

A. $button-color: blue !default;
// User sets $button-color: green before importing this file

B. $button-color: blue !default;
$button-color: green;

C. $button-color: green;
$button-color: blue !default;

D. $button-color: blue !default;

Solution

1. Step 1: Understand how !default works with user overrides

   The !default flag sets a variable only if it is not already set. To allow user override, the user must set the variable before this file is loaded.

2. Step 2: Analyze each option

   $button-color: green; $button-color: blue !default; sets $button-color first without !default, then tries to set default, which won't work as intended. $button-color: blue !default; $button-color: green; sets default first, then overwrites it, so user cannot override easily. $button-color: blue !default; sets default but does not mention user override. $button-color: blue !default; // User sets $button-color: green before importing this file correctly shows default with comment explaining user sets variable before import, enabling override.

3. Final Answer:

   Use !default and let user set variable before import. -> Option A

4. Quick Check:

   User sets variable before default with !default [OK]

Hint: User must set variable before default for override [OK]

Common Mistakes:

• Setting default after user value
• Not allowing user to set variable before import
• Confusing order of assignments