@else and @else if branches in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an @else branch that sets the color to blue.

SASS

@if $theme == 'dark' {
  color: white;
} [1] {
  color: blue;
}

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

A@else if

B@else:

C@elseif

D@else

Attempts:

3 left

💡 Hint

Common Mistakes

Using @else if without a condition in the else branch.

Adding a colon after @else which is invalid.

The @else branch is used without a condition to provide a fallback style when the @if condition is false.

2fill in blank

medium

Complete the code to add an @else if branch that checks if $theme is 'light'.

SASS

@if $theme == 'dark' {
  color: white;
} [1] $theme == 'light' {
  color: black;
}

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

A@elseif

B@else

C@else if

D@if

Attempts:

3 left

💡 Hint

Common Mistakes

Using @else without a condition when a condition is needed.

Writing @elseif as one word which is invalid in Sass.

The @else if branch allows checking another condition if the first @if is false.

3fill in blank

hard

Fix the error in the @else if syntax to correctly check if $mode is 'compact'.

SASS

@if $mode == 'expanded' {
  padding: 2rem;
} [1] $mode == 'compact' {
  padding: 1rem;
}

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

A@elseif

B@else if

C@else

D@if

Attempts:

3 left

💡 Hint

Common Mistakes

Writing @elseif as one word.

Using @else without a condition when a condition is needed.

In Sass, the correct syntax for else-if is two words: @else if, not @elseif.

4fill in blank

hard

Fill both blanks to complete the conditional branches checking $size for 'small' and 'medium'.

SASS

@if $size == 'small' {
  font-size: 0.8rem;
} [1] $size == 'medium' {
  font-size: 1rem;
} [2] {
  font-size: 1.2rem;
}

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

A@else if

B@else

C@elseif

D@if

Attempts:

3 left

💡 Hint

Common Mistakes

Using @elseif instead of @else if.

Adding a condition to @else branch.

Use @else if to check another condition and @else as the fallback branch.

5fill in blank

hard

Fill all three blanks to create conditional branches for $state: 'active', 'disabled', and default.

SASS

@if $state == 'active' {
  opacity: 1;
} [1] $state == 'disabled' {
  opacity: 0.5;
} [2] {
  opacity: 0.8;
} [3] {
  cursor: pointer;
}

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

A@else if

B@else

C@if

D@elseif

Attempts:

3 left

💡 Hint

Common Mistakes

Using @elseif instead of @else if.

Using @else with a condition.

Not starting the last block with @if since it is separate.

Use @else if for the second condition, @else for the default fallback, and a new @if for a separate unrelated condition.