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

Free Preview
Продолжительность:

В CSS принято писать значения напрямую: color: #4a90e2, border-radius: 8px, gap: 24px. Это работает, но стоит захотеть изменить основной цвет — придётся искать по всему файлу и менять его в десятках мест. CSS-переменные решают эту проблему.

Что такое CSS-переменные

CSS-переменные (официальное название — CSS Custom Properties) позволяют задать значение один раз, присвоить ему имя и затем использовать это имя везде в стилях. Имена переменных всегда начинаются с двух дефисов --:

:root {
  --color-primary: #4a90e2;
  --border-radius: 8px;
  --gap: 24px;
}
css

Псевдокласс :root — это корневой элемент документа (<html>). Переменные, объявленные в нём, доступны на всей странице.

Чтобы использовать переменную, пишем функцию var():

.button {
  background: var(--color-primary);
  border-radius: var(--border-radius);
  padding: 12px var(--gap);
}

.card {
  border-radius: var(--border-radius);
  gap: var(--gap);
}
css

Теперь, если нужно изменить скругление — достаточно поправить одну строку в :root.

Запасное значение

var() принимает второй аргумент — запасное значение на случай, если переменная не определена:

.button {
  background: var(--color-accent, #e2574a);
}
css

Если --color-accent нигде не объявлена, будет использовано #e2574a. Это редко нужно в своих проектах, но полезно при создании библиотек компонентов.

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

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

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
}

.dark-section {
  --color-bg: #1a1a1a;
  --color-text: #ffffff;

  /* все дочерние элементы .dark-section автоматически
     получат тёмные цвета через var() */
  background: var(--color-bg);
  color: var(--color-text);
}
css

Переменные и медиазапросы

Вот где переменные раскрываются по-настоящему. Вместо того чтобы переписывать десятки правил в медиазапросе, можно изменить всего несколько переменных — и всё, что их использует, обновится автоматически:

:root {
  --container-width: 1200px;
  --section-padding: 80px 20px;
  --font-size-hero: 56px;
  --grid-columns: 3;
}

@media (max-width: 1024px) {
  :root {
    --grid-columns: 2;
    --font-size-hero: 40px;
    --section-padding: 60px 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --grid-columns: 1;
    --font-size-hero: 32px;
    --section-padding: 40px 16px;
  }
}
css

Теперь все блоки, которые используют var(--section-padding) или var(--font-size-hero), автоматически адаптируются — и вам не нужно прописывать медиазапрос отдельно для каждого из них.

Тёмная тема

Самый популярный пример применения переменных — переключение тёмной темы. Задаём все цвета как переменные, и меняем их при добавлении класса на body:

:root {
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-primary: #4a90e2;
}

body.dark {
  --color-bg: #121212;
  --color-surface: #1e1e1e;
  --color-text: #f0f0f0;
  --color-text-secondary: #aaaaaa;
  --color-primary: #60a5fa;
}

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

.card {
  background: var(--color-surface);
}
css

Клик по кнопке переключения — один classList.toggle('dark') на body — и вся страница меняет тему мгновенно.

Переменные и calc()

Переменные отлично работают с функцией calc(), что позволяет строить гибкие зависимости между значениями:

:root {
  --spacing-base: 8px;
}

.card {
  padding: calc(var(--spacing-base) * 2);    /* 16px */
  margin-bottom: calc(var(--spacing-base) * 3); /* 24px */
}
css

Переменные и JavaScript

Через JavaScript можно читать и менять CSS-переменные в реальном времени:

const root = document.documentElement;

// Читаем переменную
const primary = getComputedStyle(root).getPropertyValue('--color-primary');

// Меняем переменную
root.style.setProperty('--color-primary', '#e2574a');
js

Это открывает возможности для динамических тем, анимаций на основе положения курсора и многого другого. Подробнее — на doka.guide/css/custom-properties.

Итого

CSS-переменные — один из тех инструментов, которые начинаешь использовать и уже не хочется без них. Основное:

  • объявляются в :root для глобального доступа, на селекторе — для локального;
  • используются через var(--name), можно указать запасное значение;
  • меняются в медиазапросах — и всё, что их использует, адаптируется автоматически;
  • позволяют легко реализовать тёмную тему;
  • доступны из JavaScript.

Это завершающий урок второго модуля. Мы прошли путь от базовых CSS-селекторов до современных инструментов вроде grid, анимаций и переменных. В следующем модуле переходим к изучению JavaScript.

Предыдущий урокСледующий урок