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.