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

Как определить переменную CSS в коде

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

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

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

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

Определение переменной

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

:root {
  --main-bg-color: #3498db;
  --main-text-color: #ffffff;
}
  • :root — это псевдокласс, который соответствует корневому элементу документа. В HTML это всегда <html>.
  • --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 для установки цвета фона.
  • color: var(--main-text-color); — здесь используется переменная --main-text-color для установки цвета текста.

Зачем это нужно

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

Пример с fallback-значением

Функция var() также поддерживает указание значения по умолчанию, которое будет использоваться, если переменная не определена:

button {
  background-color: var(--button-bg-color, #e74c3c);
}
  • var(--button-bg-color, #e74c3c); — если --button-bg-color не определена, будет использован цвет #e74c3c.

Применение в реальных проектах

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

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

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

Твои заметки