SASS: Программирование
2026-02-26 20:48 Diff
https://ru.hexlet.io/courses/sass-programming/lessons/conditions/theory_unit

Если вы изучали любой язык программирования, то знаете, что одним из самых распространенных элементов в них является условная конструкция if/else. Что же эта конструкция позволяет делать? Условная конструкция позволяет выполнять тот или иной участок кода в зависимости от того, является ли истинным условие внутри этой конструкции.

Перед тем, как пойти дальше разберемся с понятиями, которые были введены выше:

  • Условная конструкция — конструкция, которая направляет работу скрипта по одному из нескольких путей, в зависимости от того, истинно ли условие внутри конструкции.
  • Условие — любое выражение, которое можно свести либо к истинности, либо ко лжи. Например, выражение 2 + 2 = 4 истинно, а 2 + 5 = 1 — нет.

Разберем простой пример с миксинами. Пускай дизайнер прислал нам макет с двумя разными цветовыми схемами: светлой и темной. В зависимости от того, что указано в настройках проекта нам надо использовать или одну, или другую цветовую схему.

Опишем в миксине card обе цветовые схемы, которые прислал дизайнер. Попробуем сделать две схемы с теми знаниями, которые мы имеем сейчас:

Получилась достаточно грубая конструкция. Выбор цветовой схемы мы возлагаем на классы light и dark. Получается, что для всех элементов придется использовать такие конструкции и добавлять классы. Это приведет к ужасной путанице и постоянным проблемам по причине забывания проставления класса для элемента. Подход полностью рабочий, но создаст дополнительные проблемы. Возможно еще ввести более глобальные классы light-theme или dark-theme для body, но таким образом мы получим большие участки кода с разными оформлениями, за которыми также тяжело следить.

Как здесь может помочь SASS? Мы можем использовать условные конструкции и объявить изначальную настройку темы проекта в виде отдельной переменной заранее. В дальнейшем эта настройка будет влиять на весь проект целиком. Согласитесь, что удобнее управлять выбором темы изменением всего одной переменной. Как же этого добиться?

Для этого введем переменную $dark-mode со значением true. Как мы помним, это булевый тип данных, который может принимать одно из двух значений. В данном случае значение true обозначает истинность. Значит, мы хотим использовать темную тему.

Теперь нам поможет конструкция @if у которой поставим условие на истинность переменной $dark-mode. Это можно сделать с помощью оператора ==. Все такие операторы будут рассмотрены чуть ниже. Вернем наш миксин и добавим условие.

Что здесь произошло? В самом начале миксина мы определили базовые цвета «по умолчанию». Это были настройки светлой темы. Ниже появилась условная конструкция @if в которой мы проверяем, равно ли значение переменной $dark-mode true. Так как мы установили это значение в самом начале нашего кода, то переменные $primary-color и $text-color внутри миксина card перезапишутся на те, которые указаны в теле условия.

При использовании оператора @if получается одно из двух значений:

  • true — выражение внутри оператора истинно и тогда мы заходим в тело конструкции @if.
  • false — выражение внутри оператора ложно и тогда мы игнорируем все, что находится внутри конструкции @if.

Результат компиляции файла SASS:

Операторы сравнения

В прошлом примере мы увидели один из операторов сравнения ==. Он указывает на равенство левой и правой частей выражения. Если они равны, то возвращается true и компилятор заходит в тело конструкции внутри @if.

Помимо этого существуют еще несколько операторов сравнения, которые важно знать:

  • != — не равно. Результат полностью противоположен оператору ==. Если левая и правая часть выражения не равны, то результат будет true.
  • > — левая часть выражения больше правой.
  • >= — левая часть выражения больше, либо равна правой.
  • < — левая часть выражения меньше правой.
  • <= — левая часть выражения меньше, либо равна правой.

Где нам могут понадобиться такие выражения? Предположим, что у нас есть некоторое значение font-size. Если это значение меньше 16 пикселей, то при ширине viewport до 768px, оно должно быть увеличено в полтора раза.

Если скомпилировать этот SASS файл, то получим следующий CSS код:

Теперь предположим, что где-то в проекте мы перезаписывали значение $main-font-size и установили его значение равное 16px:

Скомпилируем этот код и получим следующий код CSS:

Теперь условие $main-font-size < 16px вернуло false и компилятор не зашел в тело условной конструкции, поэтому код внутри условной конструкции не был обработан.

Логические операторы

Помимо операторов сравнения в SASS также существуют и логические операторы. Их намного меньше, не пугайтесь :) Логические операторы позволяют объединять несколько условий в одно большое выражение.

Вернемся к примеру с цветовыми схемами. Предположим, что мы делаем отдельные стили для мобильных устройств, где должна использоваться темная тема сайта. Введем дополнительную переменную, в которой укажем тип устройства. Это поможет задать свойства только для определенной группы устройств и скомпилировать стили для них.

Каким образом нам проверить, что оба условия для выбора темной темы истинны? Можно создать условную конструкцию внутри условной конструкции (привет фильму «Начало»).

Осторожно: не увлекайтесь вложенными условными конструкциями. Такие «лесенки» могут быть очень трудны для чтения. К тому же в них очень просто допустить ошибку при добавлении или удалении условия.

Избавиться от этой лесенки нам поможет логический оператор and. Он объединит оба условия и вернет true при условии, что оба выражения вернут true. Нам достаточно добавить ключевое слово and между двумя выражениями следующим образом:

Всего в SASS существует три логических оператора:

  • and ­— логический оператор «И». Вернет true, если оба выражения истины.
  • or — логический оператор «ИЛИ». Вернет true, если хотя бы одно выражение истинно.
  • not — логический оператор отрицания «НЕ». Вернет true, если выражение ложно.

Оператор else

В самом начале урока говорилось, что мы изучаем условную конструкцию if/else. С @if мы разобрались, теперь остался один вопрос: а что такое @else? На самом деле все проще, чем может показаться на первый взгляд. Блок кода внутри @else выполнится, если выражение в @if ложно. Все что нам нужно — добавить конструкцию @else после блока с @if. На примере с цветовыми схемами мы можем переписать код следующим образом:

Вот и вся хитрость. Так мы можем выбирать тот блок кода, который будет выполнен в зависимости от условия внутри оператора @if. При этом обратите внимание, что зачастую можно обойтись без оператора @else. Во всех примерах, кроме последнего мы перезаписывали значение переменной, если была выбрана темная тема. Это правильный подход, так как таким образом мы уверены в том, что по умолчанию будут установлены какие-то цвета и мы банально пишем меньше кода.