Логические

@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

Вы можете работать с логическими значениями, используя логические операторы. Оператор 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

@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

Использование логических значений permalinkИспользование логических значений

Вы можете использовать логические значения, чтобы выбрать, выполнять ли какие-либо действия в Sass. Правило @if оценивает блок стилей, если его аргумент равен true:

@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);
}

@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)

.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

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

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

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

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