9. CSS переменные

CSS: Переменные (Custom Properties)

Иллюстрация к уроку

CSS-переменные, официально известные как Custom Properties (пользовательские свойства), позволяют вам определять собственные свойства и повторно использовать их значения по всему документу. Это значительно упрощает управление стилями, улучшает читаемость кода и делает его более гибким и поддерживаемым.

Что такое CSS-переменные и зачем они нужны?

Представьте, что вам нужно использовать один и тот же цвет или размер шрифта в десятках мест вашего проекта. Если вы решите изменить этот цвет или размер, вам придется искать и заменять его в каждом отдельном месте. CSS-переменные решают эту проблему, предоставляя механизм для хранения значений, которые можно повторно использовать.

Преимущества:

DRY (Don’t Repeat Yourself): Избегайте дублирования кода.
Темизация: Легко переключать темы (светлая/темная) или брендинг.
Сопровождаемость: Изменение значения в одном месте обновляет его везде.
Динамичность: Значения переменных могут изменяться в JavaScript и в медиа-запросах.
Читаемость: Свойствам можно давать семантические имена.

Объявление и использование переменных

CSS-переменные объявляются с префиксом -- и используются с функцией var().

/* Объявление переменной */
--название-переменной: значение;

/* Использование переменной */
свойство: var(--название-переменной);

Область видимости (Scope)

Как и обычные CSS-свойства, переменные наследуются. Это означает, что переменная, объявленная в элементе, будет доступна для всех его потомков. Наиболее распространенный подход — объявлять глобальные переменные в псевдоклассе :root.

Глобальные переменные (`:root`)

Псевдокласс :root соответствует корневому элементу документа (обычно <html>). Объявление переменных здесь делает их доступными для всего документа.

/* Пример 1: Глобальные переменные для цвета и отступов */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --spacing-md: 16px;
  --border-radius: 5px;
}

body {
  font-family: Arial, sans-serif;
  color: var(--text-color);
  margin: 0;
  padding: var(--spacing-md);
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px var(--spacing-md);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
}

Локальные переменные

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

/* Пример 2: Локальная переменная */
.card {
  --card-bg: #f9f9f9; /* Локальная переменная для .card */
  background-color: var(--card-bg);
  border: 1px solid #ddd;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius);
}

.card-header {
  color: var(--primary-color);
  margin-bottom: calc(var(--spacing-md) / 2); /* Использование calc() с переменной */
}

/* Переопределение локальной переменной для конкретной карточки */
.card.dark-mode {
  --card-bg: #444; /* Переопределение --card-bg только для этой карточки */
  color: white;
}

Запасные значения (Fallback Values)

Функция var() может принимать второе, необязательное значение — запасное (fallback). Оно будет использовано, если указанная переменная не найдена.

/* Пример 3: Запасные значения */
.element {
  /* Если --non-existent-var не определена, будет использован 'red' */
  color: var(--non-existent-var, red);
  /* Если --another-var не определена, будет использована 'var(--fallback-color)' */
  /* А если и --fallback-color не определена, то 'blue' */
  background-color: var(--another-var, var(--fallback-color, blue));
}

Динамическое изменение переменных

С помощью медиа-запросов

Можно изменять значения переменных в зависимости от размера экрана.

/* Пример 4: Адаптивность с переменными */
:root {
  --base-font-size: 16px;
  --header-spacing: 24px;
}

h1 {
  font-size: calc(var(--base-font-size) * 2);
  margin-bottom: var(--header-spacing);
}

@media (max-width: 768px) {
  :root {
    --base-font-size: 14px; /* Уменьшаем базовый размер шрифта на маленьких экранах */
    --header-spacing: 16px;
  }
}

Для создания тем (Theming)

Одна из самых мощных возможностей переменных — создание тем.

/* Пример 5: Темизация */
:root { /* Светлая тема по умолчанию */
  --bg-color: #f0f2f5;
  --text-color: #333;
  --link-color: #007bff;
}

body.dark-theme { /* Темная тема */
  --bg-color: #282c34;
  --text-color: #e0e0e0;
  --link-color: #61dafb;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

Типичные ошибки

Забыт префикс --: my-color: red; вместо --my-color: red;. Без префикса это не переменная.
Отсутствие var() при использовании: color: --primary-color; вместо color: var(--primary-color);.
Неправильная область видимости: Попытка использовать локальную переменную из другого элемента, не являющегося потомком.
Использование var() в названиях свойств: var(--my-property): value; – переменные могут хранить только значения, а не названия свойств.
Пустые переменные без запасного значения: color: var(--undefined-var); если --undefined-var не определена, свойство будет проигнорировано.

🎯 Практика

Создайте простой блок <div class="component-box"> с заголовком и текстом.

Определите глобальные переменные для --main-font, --box-bg-color, --box-text-color и --box-border-radius.
Примените их к .component-box и его содержимому.
Создайте модификатор .component-box.alt который будет переопределять --box-bg-color и --box-text-color на другие значения.

/* Ваш код здесь */

💡 Совет

Старайтесь давать переменным семантические имена, описывающие их назначение, а не конкретные значения (например, --primary-color вместо --blue-color). Это сделает ваш код более гибким, если значение цвета изменится. Также помните, что переменные наследуются, поэтому объявление в :root делает их глобальными, а в более специфичных селекторах — локальными.

Практика

Попробуйте примеры в интерактивном редакторе: