Booleans

Booleans are the logical values true and false. In addition their literal forms, booleans are returned by equality and relational operators, as well as many built-in functions like math.comparable() and map.has-key().

SCSS Syntax

@use "sass:math";

@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug math.comparable(100px, 3in); // true

Sass Syntax

@use "sass:math";

@debug 1px == 2px  // false
@debug 1px == 1px  // true
@debug 10px < 3px  // false
@debug math.comparable(100px, 3in)  // true

You can work with booleans using boolean operators. The and operator returns true if both sides are true, and the or operator returns true if either side is true. The not operator returns the opposite of a single boolean value.

SCSS Syntax

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

@debug not true; // false
@debug not false; // true

Sass Syntax

@debug true and true  // true
@debug true and false  // false

@debug true or false  // true
@debug false or false  // false

@debug not true  // false
@debug not false  // true

Using Booleans

You can use booleans to choose whether or not to do various things in Sass. The @if rule evaluates a block of styles if its argument is true:

SCSS Syntax

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av { @include avatar(100px, $circle: false); }
.circle-av { @include avatar(100px, $circle: true); }

Sass Syntax

@mixin avatar($size, $circle: false)
  width: $size
  height: $size

  @if $circle
    border-radius: $size / 2

.square-av
  @include avatar(100px, $circle: false)
.circle-av
  @include avatar(100px, $circle: true)

CSS Output

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

The if() function chooses returns one value if its argument is true and another if its argument is false:

SCSS Syntax

@debug if(true, 10px, 30px); // 10px
@debug if(false, 10px, 30px); // 30px

Sass Syntax

@debug if(true, 10px, 30px)  // 10px
@debug if(false, 10px, 30px)  // 30px

Truthiness and Falsiness

Anywhere true or false are allowed, you can use other values as well. The values false and null are falsey, which means Sass considers them to indicate falsehood and cause conditions to fail. Every other value is considered truthy, so Sass considers them to work like true and cause conditions to succeed.

For example, if you want to check if a string contains a space, you can just write string.index($string, " "). The string.index() function returns null if the string isn’t found and a number otherwise.