Условия: @if и @else

Условие позволяет миксину или функции выдавать разные стили в зависимости от аргументов. @if проверяет выражение при компиляции: если оно истинно, выводится блок, иначе Sass переходит к @else. Браузер видит только выбранную ветку.

@if и @else

Миксин кнопки может выдавать залитую кнопку или кнопку с обводкой. Добавьте его в styles/abstracts/_mixins.scss:

// styles/abstracts/_mixins.scss
@mixin button($color, $outline: false) {
  padding: 8px 16px;
  border: 2px solid $color;
 
  @if $outline {
    color: $color;
    background: transparent;
  } @else {
    color: white;
    background: $color;
  }
}

// styles/components/_buttons.scss
@use "../abstracts/mixins";
 
.btn-primary {
  @include mixins.button(#2563eb);
}
 
.btn-secondary {
  @include mixins.button(#2563eb, $outline: true);
}

// styles/main.scss
@use "components/buttons";

.btn-primary {
  padding: 8px 16px;
  border: 2px solid #2563eb;
  color: white;
  background: #2563eb;
}
 
.btn-secondary {
  padding: 8px 16px;
  border: 2px solid #2563eb;
  color: #2563eb;
  background: transparent;
}

<style>
  .btn-primary {
    padding: 8px 16px;
    border: 2px solid #2563eb;
    color: white;
    background: #2563eb;
  }
 
  .btn-secondary {
    padding: 8px 16px;
    border: 2px solid #2563eb;
    color: #2563eb;
    background: transparent;
  }
</style>
 
<button class="btn-primary">Купить</button>
<button class="btn-secondary">Подробнее</button>

@else необязателен: без него при ложном условии ничего не выводится.

Несколько веток: @else if

Для более чем двух вариантов добавьте @else if. Sass проверяет условия сверху вниз и берёт первое истинное:

// styles/abstracts/_mixins.scss
@mixin text-size($size) {
  @if $size == "small" {
    font-size: 14px;
  } @else if $size == "large" {
    font-size: 20px;
  } @else {
    font-size: 16px;
  }
}

// styles/components/_cards.scss
@use "../abstracts/mixins";
 
.card-note {
  @include mixins.text-size("small");
}

// styles/main.scss
@use "components/cards";

.card-note {
  font-size: 14px;
}

Операторы в условиях

Sass использует слова and, or, not, а не && и !, как JavaScript.

Что считается истиной

Ложных значений в Sass только два: false и null. Всё остальное истинно — в том числе 0, пустая строка "" и пустой список. В этом отличие от JavaScript, где 0 и "" ложны.

Частая ошибка

Сравнение чисел с разными единицами может дать неожиданный ответ. 16px == 16 — это false: число с единицей не равно числу без неё. А сравнение несовместимых единиц, например $width > 50% при $width равном 600px, останавливает сборку с ошибкой. Держите единицы сравниваемых значений одинаковыми или сравнивайте числа без единиц.