Sass: Boolean Operators

Unlike languages like JavaScript, Sass uses words rather than symbols for its boolean operators. There is no &&, ||, or ! in Sass, instead you write and, or, and not.

• not <expression> returns the opposite of the expression's value: it turns true into false and false into true.
• <expression> and <expression> returns true if both expressions' values are true, and false if either is false.
• <expression> or <expression> returns true if either expression's value is true, and false if both are false.

Basic Examples

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

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

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

The same code in the indented .sass syntax (no semicolons):

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

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

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

Truth Tables

not

and

or

Truthiness and Falsiness

Anywhere true or false are allowed, you can use other values as well.

For example, if you want to check if a string contains a space, you can use string.index($string, " "). The string.index() function returns null if the substring isn't found and a number otherwise. So the result works directly as a boolean:

@use "sass:string";

$string: "hello world";

@if string.index($string, " ") {
  // truthy: a number was returned, so the string contains a space
  @debug "Has a space";
} @else {
  // falsy: null was returned
  @debug "No space";
}

Heads up!

This differs from JavaScript, where 0, "", and [] are falsy. In Sass:

@debug if(0, "truthy", "falsy");        // truthy
@debug if("", "truthy", "falsy");       // truthy
@debug if((), "truthy", "falsy");       // truthy (empty list)
@debug if(null, "truthy", "falsy");     // falsy
@debug if(false, "truthy", "falsy");    // falsy

Operator Precedence

Sass has a standard order of operations. From tightest to loosest, the relevant operators are:

1. The unary operators not, +, -, and / (tightest)
2. *, /, and %
3. + and -
4. >, >=, <, and <=
5. == and !=
6. and
7. or
8. = (loosest, only in function arguments)

This means not binds tighter than and, which binds tighter than or. Comparison operators (==, !=, <, >, …) bind tighter than both and and or.

@debug 1 + 2 * 3 == 1 + (2 * 3);                       // true
@debug true or false and false == true or (false and false); // true

In the second line, and binds tighter than or, so false and false is grouped first, then the ors are evaluated left to right.

Use parentheses for clarity

You can explicitly control the order of operations using parentheses. An operation inside parentheses is always evaluated before any operations outside it, and parentheses can be nested.

// Without parentheses: "and" binds tighter than "or"
@debug true or false and false;   // true  (== true or (false and false))

// With parentheses: force "or" to be evaluated first
@debug (true or false) and false; // false (== (true or false) and false)

When combining several operators, add parentheses to make the intent obvious, even when they aren't strictly required.

Using Boolean Operators in Conditionals

Boolean operators are most often used inside @if, @else if, and while expressions to combine conditions.

Example: @if with and

@mixin button($large, $disabled) {
  @if $large and not $disabled {
    font-size: 1.5rem;
    padding: 1rem 2rem;
  } @else if $large and $disabled {
    font-size: 1.5rem;
    padding: 1rem 2rem;
    opacity: 0.5;
  } @else {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

.btn-primary {
  @include button($large: true, $disabled: false);
}

Example: or with relational operators

$columns: 4;

@if $columns < 1 or $columns > 12 {
  @error "Column count must be between 1 and 12.";
}

Example: combining all three

@mixin theme($dark, $compact) {
  @if $dark and not $compact {
    background: #333;
    color: #fff;
    padding: 2rem;
  } @else if $dark or $compact {
    background: #222;
    color: #eee;
    padding: 1rem;
  } @else {
    background: #fff;
    color: #000;
    padding: 1rem;
  }
}

Where Booleans Come From

Boolean values aren't only written as the literals true and false. They are also returned by:

• Equality operators: == and !=
• Relational operators: <, <=, >, >=
• Built-in functions, such as math.comparable() and map.has-key()

@use "sass:math";
@use "sass:map";

$breakpoints: ("sm": 576px, "md": 768px);

@debug 1px == 2px;                      // false
@debug 1px == 1px;                      // true
@debug 10px < 3px;                      // false
@debug math.comparable(100px, 3in);     // true
@debug map.has-key($breakpoints, "md"); // true

Summary

Key rules to remember:

1. Use words, not symbols: and/or/not, never &&/||/!.
2. Only false and null are falsy. 0, "", and () are truthy.
3. Precedence is not > and > or; comparison operators bind tighter still.
4. Use parentheses to make complex conditions unambiguous.