Hack Frontend Community

CSS Variables (Custom Properties)

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

Что такое CSS Variables?

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

Синтаксис

/* Определение переменной */
:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --spacing: 20px;
}

/* Использование переменной */
.button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

Преимущества CSS Variables

  1. Централизованное управление: Все значения хранятся в одном месте (обычно в :root), что упрощает изменение темы или стилей.
  2. Динамическое изменение: Переменные можно изменять через JavaScript, что позволяет создавать интерактивные темы.
  3. Наследование: Переменные наследуются от родительских элементов, что позволяет создавать контекстные стили.
  4. Fallback значения: Можно указать резервное значение, если переменная не определена.

Пример с fallback

.button {
  background-color: var(--primary-color, #3498db);
  /* Если --primary-color не определена, используется #3498db */
}

Область видимости переменных

CSS переменные имеют область видимости, основанную на каскаде:

/* Глобальные переменные */
:root {
  --main-color: blue;
}

/* Переменные для конкретного компонента */
.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

/* Переменные можно переопределять */
.card.dark {
  --main-color: darkblue;
  background-color: var(--main-color);
}

Работа с CSS Variables в JavaScript

CSS переменные можно изменять динамически через JavaScript:

// Получение значения переменной
const root = document.documentElement;
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');

// Установка значения переменной
root.style.setProperty('--primary-color', '#ff0000');

// Пример: изменение темы
function toggleTheme() {
  const root = document.documentElement;
  const currentTheme = root.style.getPropertyValue('--theme');
  
  if (currentTheme === 'dark') {
    root.style.setProperty('--bg-color', '#ffffff');
    root.style.setProperty('--text-color', '#000000');
    root.style.setProperty('--theme', 'light');
  } else {
    root.style.setProperty('--bg-color', '#1a1a1a');
    root.style.setProperty('--text-color', '#ffffff');
    root.style.setProperty('--theme', 'dark');
  }
}

Практический пример: Темная/светлая тема

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --primary-color: #3498db;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --primary-color: #5dade2;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

<button onclick="toggleTheme()">Переключить тему</button>

function toggleTheme() {
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-theme');
  html.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
}

Использование calc() с переменными

CSS переменные можно комбинировать с функцией calc():

:root {
  --base-size: 16px;
  --spacing: 20px;
}

.container {
  font-size: var(--base-size);
  padding: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) / 2);
}

Ограничения

  1. Нет поддержки в старых браузерах: IE11 не поддерживает CSS переменные.
  2. Нельзя использовать в медиа-запросах напрямую: Переменные работают только внутри селекторов.
  3. Нет валидации типов: CSS не проверяет, что значение переменной соответствует ожидаемому типу.

Совет:

Используйте CSS переменные для создания гибких тем, централизованного управления стилями и динамического изменения внешнего вида приложения. Они особенно полезны в современных фреймворках и библиотеках компонентов.