Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Условные конструкции 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 {
  @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. Во всех примерах, кроме последнего мы перезаписывали значение переменной, если была выбрана тёмная тема. Это правильный подход, так как таким образом мы уверены в том, что по умолчанию будут установлены какие-то цвета и мы банально пишем меньше кода.


Аватары экспертов Хекслета

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»