Boolean values and logic in SASS

Introduction

Boolean values help you decide if something is true or false in your styles. Logic lets you change styles based on these true or false checks.

Change colors when a condition is true, like a dark mode toggle.

Show or hide parts of a design based on a setting.

Apply different spacing if a feature is enabled or disabled.

Control animations only when a condition is met.

Set styles differently for mobile or desktop using true/false flags.

Syntax

SASS

$variable: true or false;
@if $variable {
  // styles when true
} @else {
  // styles when false
}

Boolean values in Sass are true or false.

Use @if and @else to run code based on these values.

Examples

Change background and text color based on dark mode being true or false.

SASS

$is-dark-mode: true;

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

Show a border only if $show-border is true.

SASS

$show-border: false;

.box {
  @if $show-border {
    border: 2px solid blue;
  } @else {
    border: none;
  }
}

Sample Program

This button changes style based on $is-active. If true, it has a dark blue background and a shadow. If false, it looks faded and not clickable.

SASS

@use 'sass:color';

$is-active: true;

.button {
  background-color: if($is-active, color.scale(blue, $lightness: -20%), gray);
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  @if $is-active {
    box-shadow: 0 0 10px color.scale(blue, $lightness: -30%);
  } @else {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

Important Notes

Boolean values are simple but powerful for controlling styles.

Use if() function for quick true/false checks inside property values.

Remember to keep your boolean variable names clear, like $is-active or $show-border.

Summary

Boolean values are true or false in Sass.

Use @if and @else to apply styles based on these values.

Boolean logic helps make your styles flexible and dynamic.

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