@if conditional logic in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply red color only if $is-error is true.

SASS

$is-error: true;

.error-message {
  @if [1] {
    color: red;
  }
}

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

A$is-error

B$error

Cis-error

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the $ sign before the variable name.

Using a variable name that is not defined.

The @if directive checks the condition inside parentheses. Here, $is-error is the correct variable to check.

2fill in blank

medium

Complete the code to set background to green if $status equals 'success'.

SASS

$status: 'success';

.status {
  @if $status [1] 'success' {
    background: green;
  }
}

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

A===

B=

C==

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using = instead of == for comparison.

Using !== or === which are JavaScript operators, not Sass.

In Sass, the equality operator is == to compare values inside @if.

3fill in blank

hard

Fix the error in the code to check if $width is greater than 100px.

SASS

$width: 120px;

.container {
  @if $width [1] 100px {
    width: $width;
  }
}

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

A=>

B>

C<

D==

Attempts:

3 left

💡 Hint

Common Mistakes

Using => instead of >.

Using == which checks equality, not greater than.

The correct operator for 'greater than' in Sass is >. The => operator is invalid here.

4fill in blank

hard

Fill both blanks to set font-size to 2rem if $large-text is true and $screen-width is at least 600px.

SASS

$large-text: true;
$screen-width: 700px;

.text {
  @if [1] and [2] {
    font-size: 2rem;
  }
}

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

A$large-text

B$screen-width >= 600px

C$screen-width > 600px

D$large-text == false

Attempts:

3 left

💡 Hint

Common Mistakes

Using > instead of >= which excludes 600px exactly.

Using $large-text == false which is the opposite condition.

The condition checks if $large-text is true and $screen-width is greater or equal to 600px using >=.

5fill in blank

hard

Fill all three blanks to create a conditional that sets margin to 1rem if $is-mobile is true, $orientation is 'portrait', and $width is less than 500px.

SASS

$is-mobile: true;
$orientation: 'portrait';
$width: 480px;

.container {
  @if [1] and [2] and [3] {
    margin: 1rem;
  }
}

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

A$is-mobile

B$orientation == 'portrait'

C$width < 500px

D$width > 500px

Attempts:

3 left

💡 Hint

Common Mistakes

Using > instead of < for $width comparison.

Forgetting to compare $orientation to 'portrait'.

All three conditions must be true: $is-mobile is true, $orientation equals 'portrait', and $width is less than 500px.