Default values with !default in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the !default flag do in Sass?

In Sass, what is the purpose of using the !default flag when assigning a variable?

A It assigns the variable only if it hasn't been assigned a value before.

B It forces the variable to be reassigned even if it already has a value.

C It makes the variable global regardless of where it is declared.

D It marks the variable as read-only and prevents changes.

💡 Hint

Think about how Sass handles variables that might already have values.

The !default flag in Sass means the variable will only get assigned if it does not already have a value. This allows setting default values that can be overridden later.

📝 Syntax

intermediate

What is the output CSS of this Sass code with !default?

Given the Sass code below, what CSS will be generated?

SASS

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

body {
  color: $color;
}

A body { color: blue red; }

B body { color: red; }

C body { color: blue; }

D Syntax error due to multiple assignments

💡 Hint

Remember the order of variable assignments and how !default works.

The first assignment sets $color to blue only if it is not set. The second assignment sets $color to red unconditionally, so the final value is red.

❓ selector

advanced

Which Sass variable assignment will NOT override a previous value?

Assuming $font-size is already set to 16px, which assignment will keep the original value?

A $font-size: 18px !global;

B $font-size: 18px;

C $font-size: 18px !default;

D $font-size: 18px !important;

💡 Hint

Think about how !default behaves compared to normal assignment.

The !default flag only assigns the value if the variable is not already set. Since $font-size is set, it keeps the original 16px.

❓ layout

advanced

How does !default help in theming Sass files?

You want to create a theme system where users can override colors before importing your styles. How does using !default in your variables help achieve this?

A It allows users to set variables before import, and your defaults only apply if they haven't set them.

B It forces users to import your variables first, then override them after.

C It disables variable overrides completely to keep your theme consistent.

D It automatically merges user variables with your defaults at runtime.

💡 Hint

Think about the order of Sass imports and variable assignments.

Using !default allows your variables to act as fallbacks. If users set variables before importing your styles, their values are used. Otherwise, your defaults apply.

❓ accessibility

expert

Why is using !default important for accessible and maintainable Sass code?

Consider a large project with multiple Sass files and contributors. How does using !default for variables improve accessibility and maintainability?

A It disables variable usage in nested selectors to avoid confusion.

B It forces all variables to be declared in a single file, improving accessibility.

C It automatically generates ARIA attributes for components.

D It prevents accidental overwrites of variables, allowing consistent styling and easier updates.

💡 Hint

Think about how consistent variable values help keep styles predictable and easy to change.

Using !default helps avoid accidental overwrites by only assigning variables if they are not already set. This keeps styles consistent and easier to maintain, which indirectly supports accessibility by ensuring predictable UI styling.

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