Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 <ul><li>Условная конструкция- конструкция, которая направляет работу скрипта по одному из нескольких путей, в зависимости от того, истинно ли условие внутри конструкции.</li>

4 <li>Условие- любое выражение, которое можно свести либо к истинности, либо ко лжи. Например, выражение2 + 2 = 4истинно, а2 + 5 = 1- нет.</li>

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

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

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

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

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

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

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

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

13 <ul><li>true - выражение внутри оператора истинно и тогда мы заходим в тело конструкции @if.</li>

14 <li>false - выражение внутри оператора ложно и тогда мы игнорируем все, что находится внутри конструкции @if.</li>

15 </ul>Результат компиляции файлаSASS:

16 <h2>Операторы сравнения</h2>

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

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

19 <ul><li>!= - не равно. Результат полностью противоположен оператору ==. Если левая и правая часть выраженияне равны, то результат будет true.</li>

20 <li>> - левая часть выражениябольшеправой.</li>

21 <li>>= - левая часть выражениябольше, либо равнаправой.</li>

22 <li>< - левая часть выраженияменьшеправой.</li>

23 <li><= - левая часть выраженияменьше, либо равнаправой.</li>

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

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

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

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

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

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

29 <h2>Логические операторы</h2>

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

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

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

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

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

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

36 <ul><li>and - логический оператор"И". Вернет true, еслиоба выраженияистины.</li>

37 <li>or - логический оператор"ИЛИ". Вернет true, еслихотя бы одно выражениеистинно.</li>

38 <li>not - логический оператор отрицания"НЕ". Вернет true, есливыражение ложно.</li>

39 </ul><h2>Оператор else</h2>

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

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