Online Tool Store
Экстрактор CSS-переменных
Вставьте CSS и извлеките каждую переменную: конфликты, неиспользуемые и неопределённые переменные найдены. Экспорт в :root, JSON или список var(), в браузере.
🔒 Этот инструмент работает полностью в вашем браузере. Ваши файлы никогда не загружаются на сервер.
Инструмент в браузере
Экстрактор CSS-переменных
Как это работает
- Начните с уже загруженного примера или вставьте свой CSS.
- Просмотрите сводку — каждую найденную переменную, любые переопределения с конфликтующими значениями, а также неиспользуемые или неопределённые переменные.
- Проверьте полную таблицу с селектором, значением и определённым типом (цвет, длина, шрифт и т. д.) каждой переменной.
- Выберите формат экспорта — чистый блок :root, JSON или список var() — затем скопируйте или скачайте его.
FAQ
Это работает в моём браузере?
Да. Ваш CSS обрабатывается локально на странице — ничего не загружается, и аккаунт не требуется.
Что считается переопределённой переменной?
Пользовательское свойство, объявленное более одного раза с разными значениями — чаще всего значение по умолчанию в :root плюс переопределение в медиа-запросе тёмной темы или классе темы. Каждое вхождение показано с селектором и номером строки, чтобы вы точно видели, где значения расходятся, вместо того чтобы молча сохранять только первое.
Что здесь означает "неиспользуемая" или "неопределённая"?
Неиспользуемая означает, что переменная объявлена через -- но нигде не вызывается через var(). Неопределённая — обратная ситуация: что-то вызывает var(--имя), но --имя нигде не объявлена во вставленном CSS. Оба случая — обычные остатки после рефакторинга, и именно неопределённые ссылки действительно стоит исправлять, поскольку браузер молча возвращается к начальному значению свойства.
Обрабатывается ли CSS внутри @media или других вложенных блоков?
Да. Блок :root, вложенный в @media (prefers-color-scheme: dark) или похожее at-правило, корректно относится к :root, а не к обёртке @media.
Можно ли использовать пример данных?
Да. Виджет загружается с примером, который намеренно включает переопределение для тёмной темы, неиспользуемую переменную и неопределённую ссылку, чтобы вы увидели все три проверки в действии, прежде чем вставлять свой CSS.
Какие форматы экспорта доступны?
Чистый блок :root {}, плоская карта токенов в формате JSON или простой список ссылок var(--имя) — скопируйте или скачайте тот, что подходит для вашего назначения.
В каком формате нужно вставлять CSS?
Вставляйте пользовательские свойства CSS по одному объявлению на строку, так же как они выглядели бы внутри блока :root, например `--brand: #0f766e;`. Каждая строка становится одной строкой в извлечённом списке.
Есть ли ограничение на объём вставляемого CSS?
Жёсткого ограничения нет — всё выполняется локально в вашем браузере, поэтому скорость извлечения зависит только от вашего устройства, а не от сервера.
Сравнение
| Функция | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Находит переменные под любым селектором, не только :root | ✓ | ✓ | Проверяется только :root |
| Показывает конфликтующие переопределения со всеми вхождениями | ✓ | Не показывается | Молча сохраняет только первое — пропущенное переопределение не обнаруживается |
| Отмечает неиспользуемые переменные и неопределённые ссылки var() | ✓ | Не показывается | Не показывается, несмотря на заявленную проверку использования |
| :root внутри @media корректно определяется как настоящий селектор | ✓ | Неприменимо — только вывод :root | Не показывается |
| Экспорт как блок :root, JSON или список var() | ✓ | ✓ | Только простой список |
В любом реальном CSS-файле, который стоит проверять, найдётся переопределение для тёмной темы или забытая неиспользуемая переменная — именно тот случай, который упускает экстрактор, сравнивающий только имена, и именно на этом данный инструмент был напрямую проверен против них.