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.

Practice

1. In Sass, which of the following represents a Boolean value?

easy

A. 1

B. "true"

C. "false"

D. true

Solution

1. Step 1: Understand Sass Boolean values

   In Sass, Boolean values are the keywords true and false, not strings or numbers.

2. Step 2: Identify the correct Boolean

   true uses true as a keyword, which is the correct Boolean value in Sass.

3. Final Answer:

   true -> Option D

4. Quick Check:

   Boolean values in Sass are true or false [OK]

Hint: Look for keywords true or false without quotes [OK]

Common Mistakes:

• Confusing strings "true" or "false" with Boolean values
• Using numbers like 1 or 0 as Booleans
• Thinking true/false must be quoted

2. Which of the following is the correct syntax to use a Boolean in an @if statement in Sass?

easy

A. @if $is-active == true { color: blue; }

B. @if $is-active = true { color: blue; }

C. @if $is-active === true { color: blue; }

D. @if $is-active != true { color: blue; }

Solution

1. Step 1: Check Sass comparison operator

   Sass uses == to compare values in @if statements, not = or ===.

2. Step 2: Identify correct syntax

   @if $is-active == true { color: blue; } uses == correctly to compare $is-active with true.

3. Final Answer:

   @if $is-active == true { color: blue; } -> Option A

4. Quick Check:

   Use double equals (==) for comparison in Sass [OK]

Hint: Use double equals (==) for comparisons in @if [OK]

Common Mistakes:

• Using single equals (=) which assigns instead of compares
• Using triple equals (===) which is invalid in Sass
• Using != when checking for true

3. What color will the following Sass code output?

$dark-mode: false;

body {
  @if $dark-mode {
    background-color: black;
  } @else {
    background-color: white;
  }
}

medium

A. white

B. black

C. transparent

D. red

Solution

1. Step 1: Check the Boolean value of $dark-mode

   $dark-mode is set to false, so the @if condition is false.

2. Step 2: Follow the @else branch

   Since the condition is false, the code inside @else runs, setting background-color to white.

3. Final Answer:

   white -> Option A

4. Quick Check:

   False condition triggers @else block [OK]

Hint: False triggers @else styles, not @if [OK]

Common Mistakes:

• Assuming false runs the @if block
• Confusing true/false values
• Ignoring the @else block

4. Identify the error in this Sass code:

$is-visible: true

.container {
  @if $is-visible == true {
    display: block;
  } @else {
    display: none;
  }
}

medium

A. Incorrect use of @else block

B. Wrong comparison operator in @if

C. Missing semicolon after variable declaration

D. Variable name cannot start with $

Solution

1. Step 1: Check variable declaration syntax

   In Sass, variable declarations must end with a semicolon. Here, $is-visible: true is missing a semicolon.

2. Step 2: Verify other syntax

   The comparison operator == and @else block are correct. Variable names can start with $.

3. Final Answer:

   Missing semicolon after variable declaration -> Option C

4. Quick Check:

   Variable declarations need semicolons [OK]

Hint: Check for missing semicolons after variables [OK]

Common Mistakes:

• Forgetting semicolon after variable assignment
• Confusing = and == in @if
• Thinking @else is optional syntax

5. You want to apply a red border only if both $is-error and $is-active are true in Sass. Which code correctly uses Boolean logic to do this?

hard

A. @if $is-error & $is-active { border: 1px solid red; }

B. @if $is-error and $is-active { border: 1px solid red; }

C. @if $is-error && $is-active { border: 1px solid red; }

D. @if $is-error or $is-active { border: 1px solid red; }

Solution

1. Step 1: Understand Sass Boolean operators

   Sass uses the keyword and for logical AND, not symbols like && or &.

2. Step 2: Identify correct syntax

   @if $is-error and $is-active { border: 1px solid red; } correctly uses and to check if both variables are true before applying the border.

3. Final Answer:

   @if $is-error and $is-active { border: 1px solid red; } -> Option B

4. Quick Check:

   Use and for logical AND in Sass [OK]

Hint: Use 'and' keyword for AND logic in Sass [OK]

Common Mistakes:

• Using && or & which are invalid in Sass
• Using 'or' instead of 'and' for both true
• Confusing bitwise & with logical and