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

Question

deepseek-v3.2 · Accepted Answer

## Что такое CSS-переменная?

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

### Ключевые особенности CSS-переменных

*   **Объявление:** Переменные объявляются внутри CSS-селектора с помощью синтаксиса `--имя-переменной: значение;`. По соглашению, имена переменных часто начинаются с двойного дефиса.
*   **Область видимости:** Они имеют **область видимости (scope)**, ограниченную селектором, в котором объявлены, и его потомками. Для создания глобальных переменных их обычно объявляют в псевдоклассе `:root`, который представляет корневой элемент документа (`<html>`).
*   **Использование:** Для получения значения переменной используется функция `var()`: `свойство: var(--имя-переменной, значение-по-умолчанию);`.
*   **Каскадирование и наследование:** Как и обычные CSS-свойства, кастомные свойства каскадируются и наследуются. Это позволяет переопределять их на разных уровнях DOM-дерева.
*   **Динамическое изменение:** Значения CSS-переменных можно изменять на лету с помощью JavaScript, что открывает возможности для создания сложных интерактивных интерфейсов (например, смены темы).

### Пример объявления и использования

```css
/* 1. ОБЪЯВЛЕНИЕ ГЛОБАЛЬНЫХ ПЕРЕМЕННЫХ в :root */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-unit: 16px;
  --font-size-large: 24px;
  --main-border: 2px solid var(--primary-color); /* Можно использовать другие переменные! */
}

/* 2. ИСПОЛЬЗОВАНИЕ через var() */
.header {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
  font-size: var(--font-size-large);
}

.button {
  background-color: var(--secondary-color);
  margin-top: calc(var(--spacing-unit) * 2); /* Можно использовать с calc() */
  border: var(--main-border);
}

/* 3. ПЕРЕОПРЕДЕЛЕНИЕ в локальной области видимости */
.dark-theme {
  --primary-color: #2980b9; /* Новое значение для .dark-theme и его детей */
  background-color: #2c3e50;
}
```

### Преимущества использования CSS-переменных

*   **Повторное использование и централизация:** Изменение значения в одном месте (`:root`) обновит его во всех стилях, где используется эта переменная. Это невероятно упрощает поддержку, особенно в больших проектах.
*   **Улучшенная читаемость:** Имена переменных (например, `--brand-blue`) часто более понятны, чем "магические числа" вроде `#3498db`.
*   **Динамические темы и "живые" стили:** Возможность менять значения через JavaScript (`element.style.setProperty('--primary-color', newColor)`) позволяет легко реализовать переключение тем (светлая/тёмная) или создавать интерактивные элементы, меняющие внешний вид в реальном времени.
*   **Логическое разделение:** Переменные позволяют отделить *константы дизайн-системы* (цвета, шрифты, отступы) от правил их применения.
*   **Работа с медиавыражениями:** Переменные можно менять внутри `@media`, что позволяет адаптировать всю дизайн-систему под разные разрешения одной строчкой кода.

```css
@media (max-width: 768px) {
  :root {
    --spacing-unit: 12px; /* Уменьшаем базовый отступ на мобильных */
    --font-size-large: 20px;
  }
}
```

### Отличия от препроцессоров (Sass/Less)

Важно понимать разницу между **нативными CSS-переменными** и переменными препроцессоров (например, `$primary-color` в Sass).

*   **Время обработки:** Переменные Sass компилируются в статические CSS-значения **во время сборки**. Браузер никогда не видит `$primary-color`, он видит уже подставленное значение `#3498db`. CSS-переменные — это **живые сущности в браузере**, они существуют в DOM и могут меняться во время выполнения.
*   **Доступность из JavaScript:** Доступ к CSS-переменным из JS тривиален, к переменным Sass — нет.
*   **Область видимости и каскадирование:** CSS-переменные подчиняются всем правилам каскада CSS, что дает им огромную гибкость. Переменные Sass имеют свою, более ограниченную, модель областей видимости.

### Поддержка браузерами и практическое применение

CSS-переменные поддерживаются во всех современных браузерах (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 16+). Для старых браузеров (например, IE11) необходим **план отката (fallback)**, который реализуется через дублирование свойства:

```css
.element {
  color: #ff0000; /* Fallback для старых браузеров */
  color: var(--primary-color, #ff0000); /* Современные браузеры используют переменную, а если она не определена — fallback */
}
```

**Итог:** CSS-переменные — это мощный нативный инструмент, который переводит разработку интерфейсов на новый уровень. Они являются фундаментом для создания **дизайн-систем**, **динамических тем** и **адаптивных, легко поддерживаемых стилей**. В отличие от решений препроцессоров, они работают в рантайме, интегрированы с DOM и открывают двери для сложной логики стилизации прямо в браузере.

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

Комментарии (1)

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

Ключевые особенности CSS-переменных

Пример объявления и использования

Преимущества использования CSS-переменных

Отличия от препроцессоров (Sass/Less)

Поддержка браузерами и практическое применение