Как работают CSS переменные

Вопрос

Как работают CSS переменные

Профессия

Frontend Developer

Что хочет услышать интервьюер

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

Ключевые тезисы

• CSS переменные (кастомные свойства) позволяют хранить значения для многократного использования в стилях. Объявляются через --variable-name: value; и используются через var(--variable-name).
• Они поддерживают каскадирование и наследование, как обычные CSS-свойства, что позволяет переопределять их в разных контекстах (например, внутри медиазапросов или конкретных селекторов).
• CSS переменные могут быть динамически изменены через JavaScript (element.style.setProperty('--variable', value)), что полезно для тем, анимаций или адаптивного дизайна.
• В отличие от препроцессорных переменных (Sass/Less), CSS переменные работают в браузере и не требуют компиляции.

Подробный ответ

CSS переменные (или кастомные свойства) — это мощный инструмент для управления стилями в веб-приложениях. Они позволяют хранить значения, которые можно многократно использовать в CSS, что упрощает поддержку и изменение стилей. Переменные объявляются с синтаксисом --variable-name: value; и используются через функцию var(--variable-name). Например, --primary-color: #3498db; можно применить к цвету текста: color: var(--primary-color);. Эти переменные поддерживают каскадирование и наследование, как обычные CSS-свойства, что позволяет переопределять их в разных контекстах, например, внутри медиазапросов или конкретных селекторов.

Одно из ключевых преимуществ CSS переменных — их динамическая природа. В отличие от переменных в препроцессорах (Sass/Less), которые компилируются в статические значения, CSS переменные работают в браузере и могут быть изменены на лету с помощью JavaScript. Это открывает возможности для создания динамических тем, анимаций и адаптивного дизайна. Например, можно изменить переменную --primary-color при клике на кнопку, и все элементы, использующие эту переменную, мгновенно обновятся.

CSS переменные также полезны для работы с медиазапросами. Например, можно определить разные значения переменных для мобильных и десктопных устройств, что упрощает создание адаптивных интерфейсов. Кроме того, переменные можно использовать для создания сложных вычислений в CSS, комбинируя их с функцией calc(), например: padding: calc(var(--spacing) * 2);.

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

Пример 1

Пример 1: Создание темы с CSS переменными

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

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

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

В этом примере переменные --primary-color и --secondary-color определены в :root и используются для стилизации кнопок. Изменение этих переменных через JavaScript мгновенно обновит все кнопки.

Пример 2

Пример 2: Динамическое изменение переменных через JavaScript

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

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

Пример 3

Пример 3: Использование переменных в медиазапросах

:root {
  --padding: 10px;
}

@media (max-width: 768px) {
  :root {
    --padding: 5px;
  }
}

.container {
  padding: var(--padding);
}

Здесь переменная --padding меняется в зависимости от ширины экрана, что делает контейнер более компактным на мобильных устройствах.

Частые ошибки

• Использование переменных без fallback-значения. Например, color: var(--undefined-var, red); — если переменная не определена, будет использован красный цвет.
• Объявление переменных в неправильном контексте. Например, если переменная объявлена внутри селектора .button, она не будет доступна в других селекторах.

Связанные темы

• CSS-функция calc() для вычислений с переменными
• CSS-каскад и наследование
• Препроцессоры CSS (Sass/Less) и их переменные
• Адаптивный дизайн с медиазапросами

Follow-up вопросы

Как объявить и использовать CSS переменную?

Уровень: basic

CSS переменная объявляется внутри селектора с префиксом --, например: --main-color: #ff0000;. Используется через функцию var(): color: var(--main-color);. Объявлять переменные лучше в :root для глобального доступа.

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

Уровень: intermediate

Да, CSS переменные можно изменять через JavaScript с помощью element.style.setProperty('--variable', value). Например: document.documentElement.style.setProperty('--main-color', 'blue'); изменит глобальную переменную.

В чем разница между CSS переменными и переменными в препроцессорах (Sass/Less)?

Уровень: intermediate

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

Как CSS переменные ведут себя в медиазапросах?

Уровень: intermediate

CSS переменные можно переопределять внутри медиазапросов, что позволяет адаптировать стили под разные условия (например, темную тему или изменение размера экрана). Например: @media (prefers-color-scheme: dark) { :root { --bg-color: #333; } }.

Как использовать CSS переменные для создания тем в приложении?

Уровень: advanced

CSS переменные идеально подходят для тем: можно определить набор переменных (цвета, отступы) для каждой темы и переключать их через JS или медиазапросы. Например, переключение между светлой и темной темой через изменение --primary-color и --background-color.