Открыть сервис
Главная → Блог → Переменные CSS

Переменные CSS

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

История

Концепция переменных в CSS обсуждалась сообществом веб-разработчиков с начала 2000-х годов. Первые проекты спецификации появились в 2012 году в рамках работы Рабочей группы CSS (CSS Working Group). Официальная рекомендация W3C (World Wide Web Consortium) «CSS Custom Properties for Cascading Variables Module Level 1» была опубликована в 2015 году. До этого разработчики использовали препроцессоры (например, Sass, Less, Stylus) для реализации переменных, однако они не были частью нативного CSS и не поддерживали каскадирование.

Первоначальная поддержка переменных CSS была реализована в браузерах Chrome 49 (2016 год), Firefox 31 (2014 год), Safari 9.1 (2016 год) и Edge 15 (2017 год). Internet Explorer не поддерживал эту технологию. К 2020-м годам переменные CSS стали стандартом, поддерживаемым всеми современными браузерами.

Синтаксис и объявление

Определение пользовательского свойства

Пользовательское свойство объявляется с помощью префикса --, за которым следует имя свойства. Имя может содержать буквы, цифры, дефисы и подчёркивания, но не может начинаться с цифры. Значение может быть любым допустимым значением CSS (цвет, размер, строка, число, функция и т.д.).

``css :root { --main-color: #3498db; --font-size: 16px; --border-radius: 4px; } ``

Чаще всего переменные объявляются в псевдоклассе :root (соответствует корневому элементу документа, обычно <html>), что делает их глобально доступными. Однако они могут быть объявлены в любом селекторе, ограничивая область видимости.

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

Для применения переменной используется функция var(), которая принимает имя пользовательского свойства и необязательное резервное значение:

``css .element { color: var(--main-color); font-size: var(--font-size, 14px); / если --font-size не определён, используется 14px / } ``

Резервное значение может быть сложным, включая несколько аргументов. Если переменная не определена и резервное значение не указано, свойство принимает начальное значение (inherit, initial, unset).

Область видимости и каскадирование

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

```css .container { --bg-color: red; }

.item { background-color: var(--bg-color); / красный, если находится внутри .container / }

.item.special { --bg-color: blue; background-color: var(--bg-color); / синий / } ```

Область видимости определяется деревом документа. Переменная, объявленная в родительском элементе, доступна всем его потомкам, если не переопределена. Это позволяет создавать темы и адаптивные дизайны без дублирования кода.

Типы значений и ограничения

Переменные CSS могут хранить любые значения, включая цвета, числа, строки, размеры, функции (calc(), url() и т.д.) и даже целые блоки свойств (например, --shadow: 2px 2px 5px rgba(0,0,0,0.3);). Однако существуют ограничения:

  • Переменная не может содержать селектор или имя свойства.
  • Нельзя использовать переменную в имени свойства (например, --prop: color; var(--prop): red; недопустимо).
  • Внутри функции var() нельзя использовать другую переменную без calc() или других функций.
  • Переменные не поддерживаются в медиа-запросах и именах ключевых кадров анимации (хотя значения внутри них — да).

Применение

Централизованное управление стилями

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

Темизация

С помощью переменных можно реализовать переключение тем (светлая/тёмная) без дублирования стилей. Достаточно изменить значения переменных в корневом элементе или в контейнере:

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

[data-theme="dark"] { --bg: black; --text: white; } ```

Адаптивный дизайн

Переменные можно переопределять в медиа-запросах, изменяя размеры шрифтов, отступы или цвета в зависимости от ширины экрана:

```css :root { --padding: 20px; }

@media (max-width: 600px) { :root { --padding: 10px; } } ```

Динамические вычисления

Совместно с функцией calc() переменные позволяют создавать адаптивные формулы:

``css .element { width: calc(100% - var(--sidebar-width, 200px)); } ``

Интерактивность через JavaScript

Переменные CSS можно изменять программно, что позволяет динамически менять стили без перезагрузки страницы:

``javascript document.documentElement.style.setProperty('--main-color', 'red'); ``

Это используется для создания анимаций, переключателей тем и интерактивных элементов.

Отличия от препроцессорных переменных

ХарактеристикаПеременные CSSПеременные Sass/Less
Область видимостиКаскадирование, наследованиеЛексическая (блочная)
Изменение во время выполненияДа (через JS или медиа-запросы)Нет (компилируются в статический CSS)
Поддержка браузерамиВсе современные (кроме IE)Требует компиляции
Использование в медиа-запросахНет (значения — да)Да
ТипизацияЛюбое значение CSSЛюбое значение (включая списки)
ПроизводительностьНезначительное влияние на рендерингНет влияния (статический код)

Критика и ограничения

Несмотря на широкое распространение, переменные CSS имеют ряд недостатков:

  • Отсутствие поддержки в Internet Explorer — до полного вымирания IE в 2022 году разработчикам приходилось использовать полифиллы или дублировать стили.
  • Невозможность использования в медиа-запросах — переменные нельзя объявить внутри @media, что ограничивает их применение для адаптивных значений (хотя можно переопределить в самом запросе).
  • Сложность отладки — поскольку переменные вычисляются во время выполнения, ошибки в их значениях могут быть неочевидны.
  • Производительность — интенсивное использование переменных в анимациях или при частом изменении через JavaScript может вызывать перерасчёт стилей (recalc), что снижает производительность на слабых устройствах.

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

Простая тема

```css :root { --primary: #007bff; --secondary: #6c757d; --success: #28a745; }

.btn-primary { background-color: var(--primary); color: white; } ```

Адаптивная сетка

```css :root { --grid-gap: 20px; --grid-columns: 3; }

.grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gap); }

@media (max-width: 768px) { :root { --grid-columns: 2; --grid-gap: 10px; } } ```

Динамический цвет акцента

```css :root { --accent: #ff5733; }

.highlight { background: linear-gradient(135deg, var(--accent), transparent); } ```

Источники

  • W3C. «CSS Custom Properties for Cascading Variables Module Level 1». W3C Recommendation, 2015.
  • MDN Web Docs. «Using CSS custom properties (variables)». Mozilla, 2023.
  • Стефанов, В. «CSS: полный справочник». 4-е издание, 2021.
  • Кантор, И. «Современный учебник JavaScript». Раздел «CSS-переменные», 2022.
  • CSS Working Group. «CSS Variables». GitHub, 2012–2020.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →

Похожие материалы