Булевы значения

@use "sass:math";

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

// SASS
@use "sass:math"

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

Вы можете работать с булевыми значениями, используя булевы операторы. Оператор and возвращает true, если обе стороны имеют значение true, а оператор or возвращает true, если любая из сторон имеет значение true. Оператор not возвращает противоположное значение булевого значения.

@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
@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. Правило @if оценивает блок стилей, если его аргумент имеет значение true:

@use "sass:math";

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

  @if $circle {
    border-radius: math.div($size, 2);
  }
}

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

// SASS
@use "sass:math"

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

  @if $circle
    border-radius: math.div($size, 2)



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

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

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

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

Функция if() возвращает одно значение, если её аргумент имеет значение true, и другое значение, если её аргумент имеет значение false:

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

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

Истинность и ложность

В местах, где допускаются значения true или false, вы также можете использовать другие значения. Значения false и null являются ложными, что означает, что Sass рассматривает их как указывающие на ложность и приводит к отказу условий. Все остальные значения считаются истинными, поэтому Sass рассматривает их как аналогичные true и приводит к выполнению условий.

Например, если вы хотите проверить, содержит ли строка пробел, вы можете просто написать string.index($string, " "). Функция string.index() возвращает null, если строка не найдена, и число в противном случае.