Developer

CSS-переменные

↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Custom properties — основа темизации и дизайн-токенов; спрашивают отличие от переменных SASS.

Объяснение

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --space: 8px;
  --radius: 8px;
}
[data-theme="dark"] { --color-bg: #121212; --color-text: #eaeaea; }
 
.card {
  background: var(--color-bg);
  color: var(--color-text, black);        /* значение по умолчанию */
  padding: calc(var(--space) * 2);
  border-radius: var(--radius);
}

Свойства:

  • Наследуются и подчиняются каскаду; можно переопределять на любом уровне (в компоненте, теме).
  • Работают во время выполнения: меняются JS (el.style.setProperty("--x", "10px")), реагируют на media/theme.
  • @property регистрирует тип и начальное значение → анимируемые переменные.
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.spin { background: conic-gradient(from var(--angle), red, blue); transition: --angle .5s; }
CSS-переменныеSASS-переменные
Живут в браузере, динамические, каскадныеКомпилируются, значения фиксируются в сборке
Темизация, состояния, JSВычисления, циклы, миксины
Нельзя использовать в именах свойств/media (до контейнеров)Можно в любом месте препроцессора

Практика: дизайн-токены (--color-*, --space-*, --font-*) и семантические алиасы (--color-danger).

Нюансы и подводные камни

  • Циклические ссылки и неопределённые переменные делают значение недействительным (используйте fallback).
  • Переменные нельзя использовать в @media условиях напрямую.
  • Слишком много слоёв алиасов усложняют поиск.
  • Изменение переменной на :root вызывает пересчёт стилей во всём документе.

Практика

  1. Сделайте светлую и тёмную темы через data-theme и токены.
  2. Управляйте цветом акцента через JS-переменную.
  3. Зарегистрируйте @property и анимируйте градиент.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки