Условные конструкции — SASS: Программирование

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

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

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

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

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

@mixin card {
  // Цвета для светлой темы
  $primary-color: #f9f9f9;
  $text-color: #424242;

  // Цвета для темной темы
  $primary-color-dark: #161625;
  $text-color-dark: #e1e1ff;

  .card {
    .card-body {
      &.light {
        background: $primary-color;
        color: $text-color;
      }

      &.dark {
        background-color: $primary-color-dark;
        color: $text-color-dark;
      }
    }
  }
}

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

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

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

$dark-mode: true;

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

$dark-mode: true;

@mixin card {
  // Цвета для светлой темы
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if ($dark-mode == true) {
    // Если условие сработает, то мы просто перезапишем значения переменных.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

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

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

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

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

.card .card-body {
  background: #161625;
  color: #e1e1ff;
}

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

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

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

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

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

$main-font-size: 14px;

html {
  font-size: $main-font-size;
}

body {
  padding: 1rem 3rem;
}

@media (max-width: 768px) {
  @if ($main-font-size < 16px) {
    html {
      font-size: $main-font-size * 1.5;
    }
  }
}

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

html {
  font-size: 14px;
}

body {
  padding: 1rem 3rem;
}

@media (max-width: 768px) {
  html {
    font-size: 21px;
  }
}

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

$main-font-size: 14px;

html {
  font-size: $main-font-size;
}

body {
  padding: 1rem 3rem;
}

// 1000 строчек кода спустя

$main-font-size: 16px;

// И еще десяток строчек спустя

@media (max-width: 768px) {
  @if ($main-font-size < 16px) {
    html {
      font-size: $main-font-size * 1.5;
    }
  }
}

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

html {
  font-size: 14px;
}

body {
  padding: 1rem 3rem;
}

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

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

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

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

$dark-mode: true;
$device: 'mobile';

@mixin card {
  // Цвета для светлой темы
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if ($dark-mode == true) {
    // Если условие сработает, то мы просто перезапишем значения переменных.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

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

$dark-mode: true;
$device: 'mobile';

@mixin card {
  // Цвета для светлой темы
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if ($dark-mode == true) {
    @if ($device == 'mobile') {
      // Если условия сработают, то мы просто перезапишем значения переменных.
      $primary-color: #161625;
      $text-color: #e1e1ff;
    }
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

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

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

$dark-mode: true;
$device: 'mobile';

@mixin card {
  // Цвета для светлой темы
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if ($dark-mode == true and $device == 'mobile') {
    // Если условия сработают, то мы просто перезапишем значения переменных.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

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

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

Оператор else

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

$dark-mode: true;
$device: 'mobile';

@mixin card {
  $primary-color: white;
  $text-color: black;

  // Переменные создаются до условий if/else, а в условиях только меняются

  @if ($dark-mode == true and $device == 'mobile') {
    // Если условия сработают, то мы просто перезапишем значения переменных.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  } @else {
    // Цвета для светлой темы
    $primary-color: #f9f9f9;
    $text-color: #424242;
  }

  .card {
    .card-body {
      background: $primary-color;
      color: $text-color;
    }
  }
}

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.