CSS-переменные: определение и использование (--var, var())

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

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

Представьте, что у вас есть фирменный цвет #FF5733. Раньше приходилось копировать его десятки раз. Теперь можно задать один раз и использовать везде, где нужно!

Как объявить переменную? 📌

CSS-переменные объявляются внутри CSS-селектора с двойным дефисом (--). Лучше всего задавать их в корневом элементе (:root), чтобы они были доступны везде:

:root {
  --primary-color: #FF5733;
  --default-padding: 16px;
  --border-radius: 8px;
}

💡 Совет: Имена переменных чувствительны к регистру! --color и --Color — разные переменные.

Как использовать переменные? 🛠

Для подстановки значения используется функция var():

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

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

.button {
  color: var(--undefined-var, black); /* Если --undefined-var нет, будет black */
}

Почему это лучше, чем SASS/LESS переменные? 🔥

1. Динамическое изменение через JS

В отличие от препроцессоров, CSS-переменные можно менять на лету:

document.documentElement.style.setProperty('--primary-color', 'blue');

2. Доступны в медиазапросах

Можно адаптировать стили без дублирования кода:

:root {
   --font-size: 16px;
}

@media (max-width: 768px) {
  :root {
       --font-size: 14px;
   }
}

3. Работают без сборки

Не нужен компилятор — браузер поддерживает их нативно!

Где применять? Практические примеры 🚀

1. Тёмная и светлая темы

:root {
  --bg-color: white;
  --text-color: black;
}

[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #eee;
}

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

Переключение темы — одна строка JS:

document.body.setAttribute('data-theme', 'dark');

2. Гибкие компоненты

.card {
  --card-padding: 20px;
  padding: var(--card-padding);
  border: 1px solid var(--border-color, #ddd);
}

.card.large {
  --card-padding: 30px;
}

Ограничения и подводные камни ⚠️

Не работают в @keyframes (но можно менять через JS).
Нельзя использовать в url() напрямую (только через calc() или JS).
Старые браузеры (IE11 и ниже) не поддерживают.

📌 Важно: Всегда проверяйте поддержку на caniuse.com.

Как отлаживать переменные? 🔍

В DevTools (Chrome/Firefox) можно:
- Посмотреть все переменные в панели Styles → :root.
- Быстро менять значения для тестирования.

:root {
  --debug: 1px solid red; /* Быстрая отладка границ! */
}

Итоги

CSS-переменные — это мощный инструмент для:

✔ Глобального управления стилями
✔ Создания тем и адаптивного дизайна
✔ Упрощения поддержки кода

Попробуйте внедрить их в свой проект — и вы удивитесь, насколько это удобно!

:root {
  --success: 🎉;
}