Boolean values and logic in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the variable $is-active to true.

SASS

$is-active: [1];

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

Afalse

Btrue

Cyes

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase True instead of lowercase true

Using 1 instead of true

Using yes which is not a valid boolean

In Sass, the boolean value true is written as true (all lowercase).

2fill in blank

medium

Complete the code to check if $is-logged-in is false.

SASS

@if $is-logged-in [1] false {
  color: red;
}

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

A==

B!=

C===

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using != which means 'not equal'

Using === which is not valid in Sass

Using !== which is not valid in Sass

Use == to compare if two values are equal in Sass.

3fill in blank

hard

Fix the error in the condition to check if $is-admin is true.

SASS

@if $is-admin [1] {
  background: blue;
}

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

A== false

B== true

C!=

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Writing == true which is redundant

Using == false which checks the opposite

Using != which is incorrect here

In Sass, you can write @if $is-admin to check if it is true directly without comparison.

4fill in blank

hard

Fill both blanks to create a condition that checks if $is-active is true and $is-admin is false.

SASS

@if $is-active [1] $is-admin [2] false {
  border: 1px solid black;
}

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

Aand

Bor

C==

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'or' instead of 'and' changes the logic

Using '!=' instead of '==' for comparison

Mixing up the order of operators

Use and to combine conditions and == to compare values.

5fill in blank

hard

Fill all three blanks to create a condition that checks if $is-logged-in is true, $is-active is true, and $is-admin is false.

SASS

@if $is-logged-in [1] $is-active [2] $is-admin [3] false {
  font-weight: bold;
}

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

Aand

C==

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'or' instead of 'and' changes the logic

Using '==' instead of '!=' for false check

Mixing up the order of operators

Use == to check for true, and and to combine conditions, with != to check $is-admin is false.