Default values with !default in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the !default flag do in Sass?

It sets a variable only if it has not been set before. This means the variable keeps its value unless it is undefined, then the !default value is used.

beginner

How do you write a Sass variable with a default value of blue?

$color: blue !default;

This means $color will be blue unless it was already set to something else.

intermediate

Why use !default in Sass variables?

It helps avoid overwriting variables when importing files. You can set a default style but allow users to customize by setting the variable before importing.

beginner

What happens if you set a variable without !default after it was already set?

The new value will overwrite the old one, no matter what. !default prevents overwriting if the variable exists.

beginner

Can !default be used with any Sass variable type?

Yes, it works with colors, numbers, strings, lists, maps, or any value type in Sass.

What does $font-size: 16px !default; do if $font-size is already set to 14px?

A Removes $font-size variable

B Sets $font-size to 16px anyway

C Throws an error

D Keeps $font-size as 14px

The !default flag only sets the variable if it is not already set. Since $font-size is 14px, it stays 14px.

Why is !default useful when creating reusable Sass libraries?

A It forces users to change variables

B It allows users to override variables before import

C It prevents variables from being set

D It deletes unused variables

Using !default lets users set variables before importing the library, so the library uses those values instead of defaults.

Which of these is a correct way to set a default variable in Sass?

A $color: red !default;

B $color: red default;

C $color = red !default;

D $color !default: red;

The correct syntax is $variable: value !default; with a colon and the !default flag after the value.

If you want to ensure a variable is always set to a specific value, should you use !default?

A No, omit !default to force the value

B No, use !important instead

C Yes, but only for colors

D Yes, always use !default

Omitting !default means the variable will be overwritten no matter what, ensuring the value is set.

Can !default be used multiple times on the same variable in different files?

A Yes, it overwrites each time

B No, it causes errors

C Yes, the first set value stays

D No, only one !default per project

The first time the variable is set, it keeps that value. Later !default assignments do not overwrite it.

Explain how the !default flag works in Sass variables and why it is useful.

Think about how you can set a backup value that only applies if no other value exists.

Describe a real-life situation where using !default in Sass variables would help you manage styles better.

Imagine you make a button style library others use and want them to change colors easily.

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