CSS Custom Properties: глубокий разбор переменных

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

Как объявлять и использовать CSS-переменные

Переменные в CSS объявляются с префиксом -- и обычно определяются в :root, чтобы быть доступными во всем документе:

css
КопироватьРедактировать
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

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

В отличие от препроцессорных переменных (Sass, Less), CSS-переменные можно изменять в реальном времени через JavaScript:

js
КопироватьРедактировать
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

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

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

Переменные могут быть объявлены не только в :root, но и в любом элементе:

css
КопироватьРедактировать
.card {
  --card-bg: #f5f5f5;
  background-color: var(--card-bg);
}

.card.dark {
  --card-bg: #333;
}

Значение будет меняться в зависимости от контекста.

Fallback в CSS-переменных

Если переменная не объявлена, можно задать запасное значение:

css
КопироватьРедактировать
button {
  background: var(--btn-bg, blue);
}

Продвинутые фишки использования

1. Работа с calc() – можно использовать переменные в математических вычислениях:

css
КопироватьРедактировать
:root {
  --base-size: 10px;
}

div {
  width: calc(var(--base-size) * 2);
}

1. Темизация и светлая/тёмная тема – можно переключать темы через CSS:

css
КопироватьРедактировать
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #000000;
    --text-color: #ffffff;
  }
}

1. Анимация через CSS-переменные – динамическое изменение стилей с transition:

css
КопироватьРедактировать
:root {
  --size: 100px;
}

.box {
  width: var(--size);
  height: var(--size);
  background: red;
  transition: width 0.3s ease;
}

.box:hover {
  --size: 150px;
}

Вывод

CSS Custom Properties — мощный инструмент, который добавляет гибкость и динамичность в стилизацию. Они незаменимы при работе с темизацией, адаптивностью и взаимодействием с JavaScript.