← Дополнительные свойства Фильтры и эффекты →

CSS-переменные

🎨 var(), :root, наследование, переопределение

CSS-переменные (также известны как кастомные свойства) позволяют хранить значения в одном месте и переиспользовать их по всему документу.

1. Что такое CSS-переменные

Это значения, которые можно сохранить под именем и потом использовать многократно. Имена переменных начинаются с двух дефисов --.

:root {
    --main-color: #530899;
    --secondary-color: #14b8a6;
    --padding: 20px;
}

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

2. Объявление переменных — :root

Обычно переменные объявляют внутри :root — это псевдокласс, который соответствует корневому элементу документа (<html>). Переменные, объявленные в :root, доступны на всей странице.

:root {
    --primary: #530899;
    --secondary: #14b8a6;
}

3. Использование переменных — var()

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

.element {
    color: var(--demo-primary, #000000);
    background-color: var(--demo-secondary, #ffffff);
}

Цвет фона задан через переменную --demo-primary

✅ Переменная работает на всей странице

4. Наследование переменных

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

.parent {
    --text-color: #14b8a6;
}
.child {
    color: var(--text-color);
}

Родитель

Дочерний элемент (цвет через переменную от родителя)

✅ Переменная, заданная на родителе, доступна потомку

5. Переопределение переменных

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

:root {
    --color: #530899;
}
.button {
    background-color: var(--color);
}
.button.secondary {
    --color: #14b8a6;  /* переопределяем */
}

✅ Один класс кнопки, разные цвета через переопределение переменной

6. Пример использования: темы оформления

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

:root {
    --bg: white;
    --text: black;
}
.dark-theme {
    --bg: #1a1a1a;
    --text: white;
}
body {
    background-color: var(--bg);
    color: var(--text);
}

Как переключать тему: При нажатии на кнопку JavaScript добавляет класс dark-theme к элементу <body> (или удаляет его). Все переменные автоматически обновятся, так как CSS-переменные наследуются.

Это демонстрация темы. Нажмите на кнопку, чтобы переключить.

✅ При нажатии на кнопку JavaScript добавляет/удаляет класс, и CSS-переменные меняют цвета

📌 Подробнее про JavaScript: Мы разберём, как менять классы элементов через JS, в разделе про JavaScript. Пока просто запомните: смена темы — это задача и для CSS (переменные), и для JS (переключение классов).

📌 Зачем нужны переменные:

Не повторять одни и те же значения (цвета, отступы, шрифты)
Легко менять дизайн в одном месте
Создавать темы оформления (светлая/тёмная)
Упрощать поддержку кода

📓 Из тетради: «CSS-переменные — это как найти и заменить во всём файле, но умнее. Один раз задал цвет, и он везде изменится. Используйте их для цветовой схемы, отступов, радиусов скругления. А если нужно переопределить для отдельного компонента — просто задайте переменную заново прямо в его классе».