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.