Articles
Введение в SASS/SCSS
Функция `if` в SASS

Функция `if` в SASS

В этой статье объясняется функция if в SASS.

Мы шаг за шагом разберём всё: от основ функции if до продвинутых приёмов.

YouTube Video

Функция if в SASS

Функция if() — это простая условная функция в SASS, которая возвращает одно из двух значений в зависимости от булевого условия. Она похожа на тернарный оператор JavaScript.

Синтаксис

Синтаксис следующий:.

1// if(condition, trueValue, falseValue)
  • Если condition истинно, возвращается trueValue; если ложно — falseValue.

Основное использование

Например, можно использовать if() для изменения фона и цвета текста в зависимости от того, тёмная тема или светлая.

Пример кода 

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}
  • Если переменная $theme равна "dark", фон будет чёрным с белым текстом; если "light" — фон будет белым с чёрным текстом.

Сгенерированный CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • Поскольку переменная $theme — "dark", фон чёрный с белым текстом.

Различия между оператором @if и функцией if()

В Sass есть оператор @if и функция if() для условного ветвления, но они используются для разных целей.

Пример кода 

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}
  • Оператор @if управляет тем, какой код будет сгенерирован при компиляции Sass.
  • Напротив, функция if() возвращает значение и используется для динамического выбора значений внутри выражений.

Сгенерированный CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • В этом примере, поскольку значение $theme — "dark", применяется черный фон и белый цвет текста.
  • Два основных различия: оператор @if управляет структурой, а функция if() возвращает значение.

Использование вложенных функций if

Когда требуется сложное ветвление, можно вкладывать функции if.

Пример кода 

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}
  • Если $theme — "dark", возвращается чёрный; если "light" — белый; иначе возвращается значение по умолчанию ($custom-color).

Сгенерированный CSS 

1body {
2  background-color: blue;
3}
  • Так как переменная $theme — custom, цвет фона — синий.

Практические случаи использования

Переключение темы

Ниже приведён пример, который изменяет стили кнопки в зависимости от темы.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}
  • Этот код — пример условий в SASS, который переключает цвета фона, текста и границы кнопки в зависимости от значения переменной $theme. Функция if() используется для динамической установки стилей для тёмной и светлой темы.

Сгенерированный CSS 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Переключая тему, можно единообразно менять общий дизайн.

Продвинутый пример: динамическая настройка контрастности цветов

Рассмотрим пример, который автоматически выбирает цвет текста в зависимости от цвета фона.

Пример кода 

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}
  • Функция color.channel() используется для получения светлоты фона (lightness). Если это значение больше 50%, выбирается черный; если меньше — белый как цвет текста, автоматически оптимизируя контраст с фоном.

Сгенерированный CSS 

1body {
2  background-color: #000;
3  color: white;
4}
  • Используя функцию if(), можно реализовать гибкие стили с учетом доступности дизайна, например регулировку контраста.

Совместное использование с @function

Использование функции if внутри @function обеспечивает ещё более гибкое проектирование стилей.

Пример кода 

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}
  • Этот код демонстрирует использование if() внутри @function для возврата подходящих цветов в зависимости от темы и типа цвета. Это позволяет создавать согласованный и многократно используемый дизайн стилей для каждой темы.

Сгенерированный CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • Создавая и используя вспомогательные функции, которые используют if(), можно повысить поддерживаемость всего проекта.

Примечания

  1. Функцию if нельзя использовать с динамическими значениями Поскольку сам CSS — статический язык, функция if определяет значения на этапе компиляции SASS. Для условной логики во время выполнения необходимо использовать JavaScript.

  2. Отдавайте приоритет читаемости Поскольку вложенные функции if могут становиться сложными и ухудшать читаемость, вы можете при необходимости использовать SASS @mixin и @function для организации кода.

Заключение

Функция if в SASS — мощный инструмент, возвращающий разные значения в зависимости от условий. Она полезна не только для простых условий, но и во многих сценариях, например при переключении тем и динамической настройке стилей. Однако при работе со сложными условиями следите за читаемостью и используйте @mixin и @function для повышения сопровождаемости.

Освоив функцию if, вы сможете проектировать стили более эффективно и гибко.

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

YouTube Video

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