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

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

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

Синтаксис и определение

Определение переменной:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-unit: 8px;
  --font-family: "Helvetica Neue", Arial, sans-serif;
  --border-radius: 4px;
}

Использование переменной:

body {
  font-family: var(--font-family);
}

button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
}

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

:root — глобальные переменные (доступны везде):

:root {
  --global-color: #3498db;
}

body { color: var(--global-color); }
button { background: var(--global-color); }
h1 { color: var(--global-color); }

Локальные переменные (доступны в селекторе и потомках):

.card {
  --card-bg: #ffffff;
  --card-padding: 20px;
  background: var(--card-bg);
  padding: var(--card-padding);
}

.card-header {
  background: var(--card-bg); /* Имеет доступ к переменной card -->
}

Переменные в медиа-запросах:

:root {
  --font-size-heading: 32px;
  --font-size-body: 16px;
}

@media (max-width: 768px) {
  :root {
    --font-size-heading: 24px; /* Переопределяем на мобильных -->
    --font-size-body: 14px;
  }
}

h1 {
  font-size: var(--font-size-heading);
}

Практические примеры

Дизайн-система с цветами:

:root {
  /* Основные цвета -->
  --color-primary: #0066cc;
  --color-secondary: #666666;
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  
  /* Фоны -->
  --bg-light: #f8f9fa;
  --bg-dark: #212529;
  
  /* Размеры -->
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  
  /* Типография -->
  --font-size-sm: 12px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 32px;
}

button {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  background: var(--color-primary);
  color: white;
  border-radius: 4px;
}

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

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

body {
  background: var(--bg-light);
  color: var(--color-secondary);
  font-size: var(--font-size-base);
}

Тема приложения (светлая/тёмная):

:root {
  /* Светлая тема (по умолчанию) -->
  --bg-color: #ffffff;
  --text-color: #000000;
  --border-color: #cccccc;
}

[data-theme="dark"] {
  /* Тёмная тема -->
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --border-color: #444444;
}

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

.card {
  border: 1px solid var(--border-color);
  background: var(--bg-color);
}

Использование с JavaScript

Чтение переменной CSS:

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

console.log(primaryColor); // "#3498db"

Изменение переменной CSS:

// Изменить глобальную переменную
document.documentElement.style.setProperty(--primary-color, #e74c3c);

// Изменить для конкретного элемента
const button = document.querySelector(button);
button.style.setProperty(--button-color, #3498db);

Пример: переключение темы

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

// При загрузке страницы
const savedTheme = localStorage.getItem(theme) || light;
document.documentElement.setAttribute(data-theme, savedTheme);

CSS:

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

[data-theme="dark"] {
  --bg: #1a1a1a;
  --text: white;
}

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

Использование в React

function App() {
  const [theme, setTheme] = useState("light");
  
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);
  
  return (
    <div>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Переключить тему
      </button>
    </div>
  );
}

Значения по умолчанию (fallback)

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

/* Вложенные fallback значения -->
.container {
  width: var(--container-width, var(--page-width, 1200px));
}

Наследование переменных

.parent {
  --text-color: blue;
}

.child {
  color: var(--text-color); /* Наследует от родителя -->
}

.child .grandchild {
  color: var(--text-color); /* Также наследует -->
}

Вычисления с переменными

:root {
  --spacing: 8px;
  --border-width: 2px;
}

.box {
  /* Использование calc() с переменными -->
  padding: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) * 3);
  border: var(--border-width) solid black;
  box-shadow: 0 0 calc(var(--border-width) * 5) rgba(0,0,0,0.1);
}

Таблица сравнения: переменные CSS vs препроцессоры

Лучшие практики

1. Определяй в :root для глобальных значений:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

1. Используй конвенцию именования:

--component-property-state
--button-bg-hover
--input-border-error
--card-bg-light

1. Группируй связанные переменные:

:root {
  /* Цвета -->
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  
  /* Размеры -->
  --size-sm: 8px;
  --size-md: 16px;
  
  /* Типография -->
  --font-base: 16px;
  --font-heading: 32px;
}

1. Используй для значений, которые могут меняться:

/* Хорошо -->
--primary-color: #3498db; /* Может меняться (тема) -->

/* Плохо -->
--border-style: 1px solid; /* Редко меняется -->

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