Переменные в CSS: как и зачем их использовать
,

Переменные в CSS: как и зачем их использовать

Содержание

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

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

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

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

Здесь :root — это селектор, который применяется ко всему документу, так что переменная --main-color будет доступна везде. Переменные в CSS работают подобно переменным в других языках программирования, что делает их особенно полезными для тех, кто работает с большими проектами.

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

После того как переменная создана, ее можно использовать в любом месте в вашем CSS. Для этого используется функция var():

.button {
  background-color: var(--main-color);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

В данном случае background-color кнопки будет использовать значение переменной --main-color, заданной ранее. Если вы решите изменить цвет, то достаточно будет обновить значение переменной, и это сразу отобразится во всех местах, где она используется.

Локальные переменные

CSS-переменные можно задавать не только на уровне :root, но и в других селекторах. Это позволяет создавать локальные переменные, которые будут действовать только в определенной области. Например:

.card {
  --card-padding: 15px;
  padding: var(--card-padding);
  background-color: var(--main-color);
}

В этом примере --card-padding доступна только внутри .card, и при необходимости можно задать для других элементов свои значения.

Переменные и значения по умолчанию

CSS-переменные позволяют задавать значения по умолчанию. Если переменная не определена, можно использовать второе значение, передаваемое функции var():

.container {
  color: var(--text-color, black);
}

Здесь, если --text-color не задана, будет применен цвет black как значение по умолчанию.

Анимации и переходы с CSS-переменными

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

Плавные переходы

С помощью CSS-переменных и свойства transition можно сделать плавные переходы между стилями. Например, при наведении на элемент можно изменить его цвет:

:root {
  --button-bg: #3498db;
  --button-hover-bg: #2980b9;
}

.button {
  background-color: var(--button-bg);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

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

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

Анимации с ключевыми кадрами

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

:root {
  --pulse-color: #ff6347;
}

@keyframes pulse {
  0% {
    background-color: var(--pulse-color);
    transform: scale(1);
  }
  50% {
    background-color: #ff8566;
    transform: scale(1.1);
  }
  100% {
    background-color: var(--pulse-color);
    transform: scale(1);
  }
}

.pulse-button {
  background-color: var(--pulse-color);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  animation: pulse 1s infinite;
}

Эта кнопка будет «пульсировать», плавно увеличиваясь и изменяя цвет. CSS-переменная --pulse-color задает основной цвет, и если его изменить, анимация автоматически подстроится под новое значение.

Изменение анимации с помощью JavaScript

Также можно управлять CSS-переменными с помощью JavaScript для более интерактивного поведения анимаций. Например, изменим скорость анимации при клике:

document.querySelector('.pulse-button').addEventListener('click', function() {
  document.documentElement.style.setProperty('--animation-speed', '2s');
});

Теперь, если добавить переменную --animation-speed в настройку анимации, можно легко менять ее скорость:

:root {
  --animation-speed: 1s;
}

.pulse-button {
  animation: pulse var(--animation-speed) infinite;
}

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

  1. Удобство изменений. Чтобы изменить цветовую схему сайта, достаточно изменить значение переменной в одном месте.
  2. Сокращение дублирования. Переменные позволяют избежать повторений, делая код более чистым и читаемым.
  3. Гибкость. Переменные можно переопределять в разных частях сайта, подстраивая стили под разные страницы или секции.
  4. Совместимость с JavaScript. CSS-переменные легко управляются с помощью JavaScript, что делает их полезными в динамических проектах.

Как использовать CSS-переменные с JavaScript

Вы можете изменять значения CSS-переменных динамически с помощью JavaScript, что позволяет гибко управлять стилями в зависимости от действий пользователя. Например:

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

Здесь значение --main-color изменится на красный цвет #e74c3c, и все элементы, использующие эту переменную, автоматически обновятся.

Пример: темная и светлая темы с CSS-переменными

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

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

.dark-theme {
  --bg-color: black;
  --text-color: white;
}

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

Теперь можно переключать классы с помощью JavaScript:

document.getElementById('theme-switch').addEventListener('click', function() {
  document.body.classList.toggle('dark-theme');
});

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

Дополнительные материалы

MDN Web Docs: «Использование переменных в CSS»

Habr: «CSS-переменные»

Подводим итоги

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

CSS, Front-end