Народ, всем привет. Кто не помнит, CSS — это язык стилей, который отвечает за внешний вид веб-страниц. С его развитием к нему добавляют новые возможности (иногда даже через-чур с перебором, но не будем о грустном). И одна из таких это переменные в CSS. Они позволяют писать стили проще, гибче и удобнее в последующей поддержке. Давайте сегодня разберёмся, что это такое, зачем они нужны и как с ними работать.
Что такое переменные
Переменная в CSS, по аналогии с другими языками, это способ сохранить некое значение (например, цвет, отступ или шрифт) в ячейке памяти, чтобы потом использовать его многократно в разных местах CSS-кода. Переменные в CSS называются кастомными свойствами (custom properties) и всегда начинаются с двойного дефиса `--`.
:root {
--main-color: #3498db;
--padding-base: 16px;
}
В данном случае мы создали две переменные: `--main-color` и `--padding-base`. Они хранят цвет и отступ соответственно. Далее мы можем использовать их в любом месте стилей так:
.button {
background-color: var(--main-color);
padding: var(--padding-base);
}
Зачем это нужно
Представьте, что вы используете один и тот же цвет в 20 местах. Если его нужно изменить, то без переменных вы должны искать и заменять вручную все вхождения. С переменной достаточно изменить значение в одном месте. Плюс, переменные позволяют повторно использовать одни и те же значения в разных компонентах, тем самым избегая дублирования кода. А отсюда следует поддержка тем, ведь с помощью переменных можно легко реализовать светлую и тёмную темы (ну, напрмиер). Просто переопределяете значения переменных, и внешний вид страницы меняется полностью.
:root {
--bg-color: white;
--text-color: black;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f0f0f0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
Теперь достаточно переключить атрибут `data-theme` на `<body>` и тема изменится. Но это работает не только с темами, но и в общем с цветовой темой сайта. По факту, в самом начале вы сразу определяетесь с основными цветами на сайте, цветовой палитрой, так сказать. Задаете это в переменных, и далее по всему сайту вы используете только их.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.
Кстати, это не только про цвет. Вы можете использовать переменные для задания размеров элементов и адаптировать их на разных разрешениях.
:root {
--font-size-base: 16px;
}
@media (min-width: 768px) {
:root {
--font-size-base: 18px;
}
}
p {
font-size: var(--font-size-base);
}
Немного про синтаксис
Объявление
Переменные объявляются внутри любого селектора, чаще всего в `:root`, чтобы они были доступны глобально.
:root {
--primary-color: #333;
--font-main: 'Arial', sans-serif;
}
Использование
Чтобы использовать переменную, применяйте функцию `var()`:
h1 {
color: var(--primary-color);
font-family: var(--font-main);
}
Значения по умолчанию
Функция var() может принимать второй аргумент — значение по умолчанию, которое используется, если переменная не задана.
p {
color: var(--text-color, #666);
}
Если `--text-color` не определена, то цвет будет `#666`.
И напоследок еще парочка моментов:
- переменные работают только внутри DOM-дерева. Они не влияют на препроцессоры типа SCSS или Less.
- можно задавать переменные локально (например, внутри .container {}), и они будут доступны только в этом блоке.
- переменные участвуют в наследовании, как и обычные CSS-свойства.
И еще важный момент. Хотя переменные полезный инструмент, они не всегда необходимы. В небольших проектах с минимальным количеством стилей можно обойтись без них. Также стоит избегать чрезмерной вложенности и переусложнения с переменными, т.к. это может затруднить чтение кода. и помните про поддержку браузеров. CSS-переменные поддерживаются всеми современными браузерами, кроме IE 11 и ниже. Так что если вы всё ещё поддерживаете старые версии IE, то использовать CSS-переменные не стоит. Для таких случаев подойдут препроцессоры (Sass, Less).