Об этом инструменте
Пользовательские свойства CSS — обычно называемые переменными CSS — позволяют определить значение один раз (например, фирменный цвет, единицу отступа или шрифтовой набор) и переиспользовать его повсюду через var(--name). Централизация повторяющихся значений означает, что одно изменение на уровне :root каскадно применяется ко всей таблице стилей вместо поиска и замены в десятках файлов, а поскольку пользовательские свойства — это живые значения DOM, JavaScript или медиазапрос могут читать и переписывать их во время выполнения — что позволяет мгновенно переключать темы, включать тёмный режим или менять отступы по выбору пользователя, не трогая CSS.
Введите имя и значение для каждой строки ниже; этот инструмент автоматически очищает каждое имя, убирая лишний начальный «--» и заменяя недопустимые символы дефисами, поэтому опечатка вроде пропущенного префикса или случайного пробела никогда не сломает сгенерированный блок. Скопируйте результат :root { ... } прямо в свою таблицу стилей или скачайте его как отдельный .css-файл, чтобы подключить через @import где угодно. Всё выполняется локально в браузере по мере ввода; ничего не загружается на сервер.
Частые вопросы
Отправляются ли мои значения куда-либо?
Нет. Всё выполняется локально в вашем браузере — пары имя/значение никогда не покидают ваше устройство.
Могу ли я привязать переменные к конкретному селектору вместо :root?
Да — задайте свой селектор, и сгенерированный блок CSS будет использовать его вместо :root.