Перейти к основному содержимому

Переменные в CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Переменные в CSS​

Переменные в CSS — это именованные значения, которые хранят информацию для многократного использования в стилях веб-страницы. Эти величины обеспечивают централизованное управление стилями и сокращают объём кода.

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

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

ЦелиОписание
Многократное использованиеОдно значение используется во множестве мест документа
Сокращение кодаУменьшение дублирования одинаковых значений
Централизованное управлениеИзменение значения в одном месте влияет на всё приложение
Динамическое изменениеВозможность обновления значений через JavaScript
СтруктурированиеИменование повышает читаемость кода

Отличия от других языков программирования​

CSS-переменные работают непосредственно в браузере в процессе рендеринга страницы. Эта особенность отличает их от переменных препроцессоров.

Особенности работы CSS-переменных:

  • Значения вычисляются браузером в рантайме, а не на этапе компиляции
  • Значения можно изменять динамически через JavaScript
  • Область видимости работает по принципу каскада CSS
  • Поддержка наследования между родительскими и дочерними элементами
  • Значения хранятся в браузере без необходимости сборки проекта

Сравнительная таблица​

ХарактеристикаCSS-переменныеSASS/LESS переменные
Время обработкиРантайм (в браузере)Дизайтайм (на сервере)
Доступность для JSПолная поддержкаНе поддерживается
Возможность изменения темПрямая смена значенийТребует полной пересборки
Формат исходного кодаБез дополнительных инструментовТребуется сборщик
Поддержка браузеровВсе современные браузерыТребует трансляции

Синтаксис объявления переменных​

Префикс -- обязателен при создании имени переменной. Имя должно следовать правилам идентификации в CSS.

Правила именования​

Имена переменных могут содержать следующие символы:

  • Латинские буквы A-Z, a-z
  • Цифры 0-9 (но не в начале имени)
  • Дефис -
  • Подчёркивание _
  • Знак доллара $ (рекомендуется избегать)

Имена чувствительны к регистру. Различие между --Color и --color создаёт две разные переменные.

Неправильные примеры​

:root {
  --incorrect name: #ff0000;    /* Пробелы запрещены */
  --12primary: #000000;         /* Нельзя начинать с цифры */
  --invalid@sym!: #000;         /* Запрещённые символы */
}

Правильные примеры​

:root {
  --main-color: #235ad1;
  --text-font-family: Arial, sans-serif;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

Play ITЗагрузка интерактивного демо…

Функция var()​

Общая база именованных вычислений в коде — функции в коде. Полный обзор всех функций CSS — Функции в CSS. Ниже — var() и связанные приёмы в контексте переменных.

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

Базовый синтаксис​

.property: var(--variable-name);

Использование в разных свойствах​

.element {
  color: var(--text-color);
  background-color: var(--bg-primary);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--radius-small);
}

Резервные значения​

Резервное значение применяется при отсутствии переменной.

.section-title {
  color: var(--title-color, #222222);
}

.icon-box {
  background-color: var(--icon-bg, transparent);
  width: var(--icon-size, 32px);
}

Если переменной --title-color не существует, браузер использует значение #222222.

Вложенные резервные значения​

.card-header {
  color: var(--heading-color, var(--default-color, #333333));
}

.button {
  background-color: var(--btn-color, var(--brand-color, #007bff));
}

При отсутствии обоих переменных применяется последнее значение.

Области видимости​

Область видимости определяет место, где переменную можно использовать.

Глобальные переменные​

Переменные, объявленные внутри селектора :root, доступны во всём документе.

Код ITЗагрузка примера кода…

Селектор :root соответствует элементу <html>.

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

Переменные, объявленные на конкретных элементах, действуют только внутри этих элементов и их потомков.

.component-a {
  --local-theme: #f5a623;
  color: var(--local-theme);
}

.content-wrapper {
  --local-theme: #4facfe;
  color: var(--local-theme);
}

Элемент .content-wrapper использует свою локальную переменную, игнорируя глобальное значение.

Пример иерархии видимости​

Код ITЗагрузка примера кода…

Изменение происходит в порядке возрастания специфичности.

Наследование и переопределение​

CSS-переменные поддерживают механизм наследования. Потомки получают значения от родительских элементов.

Принцип наследования​

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  --size: 20px;
}

.child {
  width: var(--size);
  height: var(--size);
}

Элемент .child получает доступ к переменной --size, объявленной в .parent.

Переопределение переменных​

Дочерние элементы могут заменять унаследованные значения своими определениями.

Код ITЗагрузка примера кода…

Изменение переменной --item-size в классе .actions--large автоматически меняет размеры всех вложенных элементов.

Каскадное переопределение​

:root {
  --primary: #007bff;
  --secondary: #6c757d;
}

.btn {
  --primary: #28a745;
  background-color: var(--primary);
}

.btn-secondary {
  background-color: var(--secondary);
}

Кнопка .btn использует собственное значение --primary. Кнопка .btn-secondary наследует глобальное --secondary.

Практические применения​

Управление цветовой схемой​

Централизованное хранение цветов упрощает изменение темы всего приложения.

Код ITЗагрузка примера кода…

Изменение одной переменной обновляет цвета по всей странице.

Медиазапросы и адаптивность​

Значения переменных меняют внутри медиазапросов.

Код ITЗагрузка примера кода…

Хранение сложных структур​

Градиенты​

Код ITЗагрузка примера кода…

URL фоновых изображений​

:root {
  --logo-url: url('/images/logo.svg');
  --background-image: url('/images/pattern.png');
}

.header {
  background: var(--logo-url) no-repeat left center;
}

.page {
  background: var(--background-image) repeat fixed;
}

Комплексные значения фона​

:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --button-border: 1px solid #ddd;
}

.ui-button {
  box-shadow: var(--card-shadow);
  border: var(--button-border);
}

Работа с CSS Grid и Flexbox​

Код ITЗагрузка примера кода…

Вычисления со значениями переменных​

Функция calc() поддерживает использование переменных в расчётах.

Код ITЗагрузка примера кода…

Изменение значений через JavaScript​

JavaScript может изменять переменные в реальном времени.

// Установка переменной
document.documentElement.style.setProperty('--accent-color', '#ff6b6b');

// Чтение значения
const currentColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--accent-color')
  .trim();

// Удаление переменной
document.documentElement.style.removeProperty('--accent-color');

HTML атрибут style также принимает переменные:

<div class="grid" style="--item-width: 300px;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Специфические особенности​

Анимация и переменные​

CSS-переменные не поддерживают плавную анимацию внутри правил @keyframes.

Код ITЗагрузка примера кода…

Перемещение происходит рывками. Для плавной анимации используйте стандартные CSS-свойства.

Регистрация свойств @property​

Правило @property регистрирует кастомное свойство как типизированное. Браузер получает информацию о формате значения, наследовании и стартовом состоянии.

@property --accent-hue {
  syntax: "<angle>";
  inherits: false;
  initial-value: 210deg;
}

Поля в @property​

ПолеНазначение
syntaxОписывает допустимый тип значения
inheritsУправляет наследованием (true/false)
initial-valueСтартовое значение, если переменная не задана

initial-value обязателен для практических сценариев: без него компонент сложнее предсказуемо отрисовать при первом рендере.

Частые типы в syntax​

ТипКогда использоватьПример
<angle>Углы, поворот, направление градиента210deg, 0.5turn
<color>Цветовые токены#235ad1, oklch(0.6 0.12 250)
<length>Фиксированные размеры8px, 1.25rem
<length-percentage>Размеры с % и длиной50%, 24px
<number>Безразмерные коэффициенты1, 1.25
<percentage>Прогресс, доли0%, 100%
<time>Длительности, задержки120ms, 0.4s

Код ITЗагрузка примера кода…

Зачем это нужно в реальных проектах​

  • Плавная анимация кастомных свойств в transition и @keyframes
  • Валидация значения на уровне движка стилей
  • Предсказуемый старт компонента через initial-value
  • Контроль наследования для локальных токенов

Пример с цветом и углом​

Код ITЗагрузка примера кода…

Поддержка @property есть в современных Chromium и Safari. Для кроссбраузерных интерфейсов используйте прогрессивное улучшение — базовый стиль работает через обычные var(), а типизация и плавная интерполяция подключаются там, где поддерживаются.

Инструменты разработчика​

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

Chrome DevTools​

  • Просмотр значения переменной при наведении курсора
  • Автозавершение имён переменных
  • Возможность отключения отдельных переменных
  • Отображение вычисляемых значений

Firefox Developer Tools​

  • Поддержка автозавершения
  • Отображение вложенных резервных значений
  • Редактирование значений на лету

Safari Web Inspector​

  • Просложение значений с помощью специального индикатора
  • Отображение каскада переменных

Лучшие практики​

Конвенции именования​

Используйте осмысленные имена, отражающие назначение значения.

КатегорияПрефиксПример
Цветаcolor---color-primary
Размерыsize---size-icon-large
Отступыspace- или gap---space-medium
Шрифтыfont---font-size-base
Темыtheme---theme-dark-bg

Группировка переменных​

Разделяйте переменные по категориям.

Код ITЗагрузка примера кода…

Работа с несколькими значениями​

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

:root {
  --rgb-primary: 33, 150, 243;
}

.element {
  color: rgb(var(--rgb-primary));
}

Валидация проверяет структуру значения перед применением.

Обработка ошибок​

Браузер игнорирует значение, если оно несовместимо со свойством.

:root {
  --wrong-value: invalid;
}

.text {
  color: var(--wrong-value);
}

/* Свойство остаётся без изменения */

Установка резервных значений предотвращает потерю стилей.

.text {
  color: var(--wrong-value, #000000);
}

Браузер проверит корректность переменной. При ошибке применится значение #000000.

Встроенные стили​

Атрибут style позволяет объявлять переменные прямо в разметке HTML.

<div class="avatar-list" style="--item-count: 5;">
  <img src="user1.jpg">
  <img src="user2.jpg">
  <img src="user3.jpg">
  <img src="user4.jpg">
  <img src="user5.jpg">
</div>
.avatar-list {
  --row-size: calc(var(--item-count) / 2);
  display: grid;
  grid-template-columns: repeat(var(--row-size), 1fr);
}

Это удобно для динамических компонентов.

Содержание