sass-site/source/documentation/values/booleans.liquid

---
title: Booleans
introduction: >
  Booleans are the logical values `true` and `false`. In addition their literal
  forms, booleans are returned by [equality](/documentation/operators/equality) and
  [relational](/documentation/operators/relational) operators, as well as many built-in
  functions like [`math.comparable()`](/documentation/modules/math#comparable) and
  [`map.has-key()`](/documentation/modules/map#has-key).
---
{% codeExample 'booleans', false %}
  @use "sass:math";

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

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

{% markdown %}
  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.

  [boolean operators]: /documentation/operators/boolean
{% endmarkdown %}

{% codeExample %}
  @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
  ===
  @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
{% endcodeExample %}

{% markdown %}
  ## 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`:

  [`@if` rule]: /documentation/at-rules/control/if

{% endmarkdown %}

{% render 'code-snippets/example-if' %}

{% markdown %}
  The [`if()` function][] returns one value if its argument is `true` and
  another if its argument is `false`:

  [`if()` function]: /documentation/modules#if
{% endmarkdown %}

{% codeExample 'if-function', false %}
  @debug if(true, 10px, 30px); // 10px
  @debug if(false, 10px, 30px); // 30px
  ===
  @debug if(true, 10px, 30px)  // 10px
  @debug if(false, 10px, 30px)  // 30px
{% endcodeExample %}

{% render 'documentation/snippets/truthiness-and-falsiness' %}