Если вы изучали любой язык программирования, то знаете, что одним из самых распространенных элементов в них является условная конструкция 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. Во всех примерах, кроме последнего мы перезаписывали значение переменной, если была выбрана темная тема. Это правильный подход, так как таким образом мы уверены в том, что по умолчанию будут установлены какие-то цвета и мы банально пишем меньше кода.
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
