Условные конструкции в SASS

В этой статье рассматриваются условные конструкции в SASS.

Мы наглядно объясняем всё — от основ до продвинутого использования условий с директивами @if, @else if и @else, с практическими примерами.

YouTube Video

Условные конструкции в SASS

SASS — это язык таблиц стилей, расширяющий CSS; с помощью условных конструкций вы можете гибко управлять стилями. В SASS можно использовать @if, @else if и @else, чтобы переключать вывод стилей на этапе компиляции.

Базовый синтаксис условных конструкций

Базовые условные конструкции в SASS записываются следующим образом.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if проверяет первое условие; если оно ложно, по порядку оцениваются блоки @else if, а затем @else.

Простой пример условной конструкции

В следующем примере цвет фона переключается в зависимости от переменной $theme.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

Скомпилированный CSS

1body {
2  background-color: #333;
3  color: #fff;
4}

• Когда $theme равен "dark", применяется тёмный фон и белый цвет текста.

Комбинирование условных конструкций с вычислениями

Условные конструкции обрабатывают не только сравнения строк и цветов, но и числовые вычисления.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

Скомпилированный CSS

1.container {
2  max-width: 1200px;
3}

• Возможны также числовые сравнения: когда $width превышает 1000px, выводится max-width: 1200px.

Вложенные условные конструкции

Вкладывая условия, можно выражать сложные условия.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

Скомпилированный CSS

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• Вложенность условий позволяет задавать стили на основе и темы, и размера.

Использование условий в пользовательских функциях

Использование условий внутри пользовательских функций повышает повторное использование кода.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

Скомпилированный CSS

1.card {
2  background-color: #333;
3}

• Инкапсулируя условия в функциях, вы повышаете повторное использование и поддерживаемость.

Практический пример — переключение дизайна

Рассмотрим пример переключения общего дизайна на основе определённых условий.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

Скомпилированный CSS

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• Можно динамически переключать цветовую схему всей страницы в зависимости от переменной темы.

Примечания и лучшие практики

При использовании условных конструкций SASS обратите внимание на следующее.

1. Сохраняйте условия простыми

   Сложная вложенность ухудшает читаемость, поэтому использование функций и миксинов помогает упростить код.

2. Абстрагируйте с помощью переменных и функций

   Если вы используете похожие условия в нескольких местах, объединение их в переменные или функции повышает поддерживаемость.

3. Избегайте избыточной логики

   Максимально унифицируйте правила дизайна и избегайте чрезмерного использования условий.

Вывод

Условные конструкции в SASS — очень эффективный инструмент для создания гибких, динамичных стилей. Здесь мы пошагово объяснили всё — от основ до практических примеров. Используя условия в реальных проектах, проектируйте с учётом повторного использования кода и старайтесь не переусложнять.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video