← Назад ко всем вопросам

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

1️⃣ Как кратко ответить

Переменные в CSS объявляются с использованием синтаксиса --имя-переменной: значение; внутри селектора, обычно в :root для глобальной доступности. Используются через var(--имя-переменной).

2️⃣ Подробное объяснение темы

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

Объявление переменной

Переменные объявляются внутри селектора с использованием синтаксиса --имя-переменной: значение;. Обычно переменные объявляются в селекторе :root, чтобы они были доступны глобально:

:root {
  --main-bg-color: #3498db; /* Объявление переменной для основного цвета фона */
  --main-text-color: #ffffff; /* Объявление переменной для основного цвета текста */
}
  • :root — это псевдокласс, который соответствует корневому элементу документа, обычно <html>. Использование :root позволяет сделать переменные доступными во всем документе.
  • --main-bg-color и --main-text-color — это имена переменных. Они начинаются с двух дефисов, что является обязательным требованием синтаксиса.
  • #3498db и #ffffff — это значения переменных, которые можно использовать в других частях CSS.

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

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

body {
  background-color: var(--main-bg-color); /* Использование переменной для цвета фона */
  color: var(--main-text-color); /* Использование переменной для цвета текста */
}
  • background-color: var(--main-bg-color); — здесь переменная --main-bg-color используется для установки цвета фона элемента body.
  • color: var(--main-text-color); — здесь переменная --main-text-color используется для установки цвета текста элемента body.

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

  1. Упрощение управления стилями: Изменение значения переменной автоматически обновляет все места, где она используется.
  2. Повышение читаемости: Имена переменных могут быть описательными, что делает код более понятным.
  3. Поддержка темизации: Легко создавать разные темы, изменяя значения переменных.

Пример с темизацией

Представим, что у нас есть две темы: светлая и темная. Мы можем использовать переменные для переключения между ними:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}
​
.dark-theme {
  --bg-color: #000000;
  --text-color: #ffffff;
}
​
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
  • В этом примере переменные --bg-color и --text-color определяют цвета для фона и текста.
  • По умолчанию используется светлая тема, но при добавлении класса dark-theme к элементу, например, <body>, цвета автоматически переключаются на темные.

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

Тема: CSS
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки