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.