Default values with !default in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a default color variable using !default.

SASS

$primary-color: [1] !default;

Drag options to blanks, or click blank then click option'

Ablue

B#ff0000

Cgreen

Dblack

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add !default after the value

Using an invalid color name

The !default flag sets the variable only if it is not already defined. Here, blue is assigned as the default color.

2fill in blank

medium

Complete the code to override the default font size variable.

SASS

$font-size: [1];

Drag options to blanks, or click blank then click option'

A18px

B16px !default

C14px !default

D20px !default

Attempts:

3 left

💡 Hint

Common Mistakes

Adding !default when trying to override

Using invalid units

To override a default variable, assign a new value without !default. Here, 18px replaces any default.

3fill in blank

hard

Fix the error in the code to correctly set a default margin variable.

SASS

$margin: [1] !default;

Drag options to blanks, or click blank then click option'

A10px;

B10px !default

C10 px

D10px

Attempts:

3 left

💡 Hint

Common Mistakes

Putting semicolon inside the value

Adding extra spaces in the value

The semicolon should be outside the variable assignment. The correct syntax is $margin: 10px !default; so the value is 10px and !default is a flag.

4fill in blank

hard

Fill both blanks to set a default padding and then override it.

SASS

$padding: [1] !default;
$padding: [2];

Drag options to blanks, or click blank then click option'

A1rem

B2rem

C1.5rem

D3rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using !default on the override line

Swapping the default and override values

First, $padding is set to 1rem as a default. Then it is overridden to 2rem without !default.

5fill in blank

hard

Fill all three blanks to create a default color, override it, and then use it in a style.

SASS

$bg-color: [1] !default;
$bg-color: [2];
.button {
  background-color: [3];
}

Drag options to blanks, or click blank then click option'

A#eee

B#333

C$bg-color

D#fff

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color literal instead of the variable in CSS

Adding !default to the override

Swapping default and override colors

The default background color is #eee. It is overridden by #333. The button uses the variable $bg-color for its background.

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