Default values with !default in SASS - Performance & Optimization

Performance: Default values with !default

MEDIUM IMPACT

This affects CSS bundle size and style recalculation speed by controlling variable overrides efficiently.

Setting Sass variables with fallback to allow overrides

SASS

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

Using !default allows the first value to be overridden only if not already set, reducing unnecessary reassignments and keeping CSS output clean.

📈 Performance GainReduces Sass compile time and CSS output size

Setting Sass variables with fallback to allow overrides

SASS

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

Reassigning variables without !default causes Sass to overwrite values multiple times, increasing compile time and potential CSS output size.

📉 Performance CostIncreases Sass compile time and can add redundant CSS rules

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Reassign variables without !default	N/A	N/A	Larger CSS causes slower style calculation	[X] Bad
Use !default for fallback variable values	N/A	N/A	Smaller CSS improves style calculation speed	[OK] Good

Rendering Pipeline

Sass variables with !default affect the CSS generation step before the browser rendering pipeline. Efficient variable handling reduces CSS file size and complexity, which speeds up style calculation and layout in the browser.

→CSS Generation

→Style Calculation

→Layout

⚠️ BottleneckCSS Generation and Style Calculation

Core Web Vital Affected

LCP

This affects CSS bundle size and style recalculation speed by controlling variable overrides efficiently.

Optimization Tips

1Use !default to set fallback Sass variable values.

2Avoid reassigning variables without !default to reduce CSS size.

3Smaller CSS files improve Largest Contentful Paint (LCP) by speeding style calculation.

Performance Quiz - 3 Questions

What is the main performance benefit of using !default in Sass variables?

A Makes CSS animations run smoother

B Prevents unnecessary variable reassignments, reducing CSS output size

C Improves JavaScript execution speed

D Reduces image file sizes

DevTools: Network

How to check: Open DevTools > Network tab > Reload page > Check CSS file size and load time

What to look for: Smaller CSS file size and faster load time indicate efficient Sass variable usage

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