Экстрактор пользовательских свойств CSS
Извлекайте все пользовательские свойства CSS (--variable), объявленные в таблице стилей, с их объявленным значением и количеством ссылок через var() — полезно для аудита design system и выявления неиспользуемых переменных.
Ввод
Вывод
| Имя свойства | Объявленное значение | Количество использований |
|---|---|---|
| No data yet | ||
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-custom-property-extractor \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": ":root {\n --primary-color: #464aff;\n --spacing:…"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-custom-property-extractor` tool (CSS Custom Property Extractor) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-custom-property-extractor/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Экстрактор пользовательских свойств CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое пользовательские свойства CSS?
Пользовательские свойства CSS — обычно называемые переменными CSS — это значения, объявляемые с префиксом -- (--primary-color: #464aff;) и используемые в другом месте с помощью var(--primary-color). Они поддерживают design tokens для палитр цветов, шкал интервалов, типографики и оформления тем (включая переопределения темного режима prefers-color-scheme), позволяя одному объявлению обновить каждое место, где оно ссылается.
Эта гибкость имеет свою цену: по мере роста таблицы стилей становится сложно ответить на простые вопросы, просто читая исходный код — какие переменные действительно существуют, какое значение мы определили и кто-то все еще это использует? Этот инструмент отвечает на все три вопроса с первого взгляда.
Что делает этот инструмент
Вставьте (или загрузьте) файл CSS или SCSS, и инструмент просканирует его в поиске:
- Объявления — каждую пару
--property-name: value;в порядке их первого появления. - Использования — каждую ссылку
var(--property-name), подсчитанную для каждого свойства.
Результат — таблица с каждым пользовательским свойством, его объявленным значением и количеством использований через var() — плюс однострочная сводка по итогам. Свойство, объявленное, но никогда не ссылаемое (количество использований 0), является сильным указанием на то, что это неиспользуемый вес, который можно безопасно удалить.
Почему извлекать и аудировать пользовательские свойства?
- Аудиты design system. Подтвердите, что ваш список токенов соответствует спецификации дизайна, и выявите одноразовые цвета или значения интервалов, которые проникли за пределы системы токенов.
- Обнаружение неиспользуемых переменных. Количество использований
0отмечает переменные, на которые никто больше не ссылается — полезно перед очисткой или инициативой по сокращению размера пакета CSS. - Ввод в действие и документация. Создайте краткий справочник по каждому токену, определенному в кодовой базе, без необходимости вручную искать блоки
:root. - Проверки безопасности рефакторинга. Перед переименованием или удалением переменной посмотрите, в скольких местах она ссылается.
Как пользоваться
- Вставьте ваш CSS или SCSS в поле ввода или перетащите файл
.css/.scssна загрузчик. - Таблица обновляется автоматически по мере ввода текста — нет необходимости нажимать на кнопку.
- Скопируйте или загрузите результаты в формате CSV для документа аудита design system или билета очистки.
FAQ
Понимает ли это SCSS $variables или вложенность?
Нет — оно соответствует только встроенным пользовательским свойствам CSS (синтаксис --name). Переменные Sass ($name) и функции препроцессоров CSS не анализируются, так как они компилируются до того, как достигнут браузер.
Отслеживает ли селектор, в котором было объявлено или использовано свойство?
Нет — это плоское сканирование всей таблицы стилей. Свойство, переоцененное в блоке @media для темного режима, все равно является одной строкой (последнее объявленное значение побеждает), а использование внутри любого правила учитывается в общем количестве для этого свойства.
Считается ли резервное значение, например var(--gap, 8px)?
Да — аргумент резервного значения не препятствует учету использования как ссылки на --gap.
Конфиденциальность
Все работает локально в вашем браузере. Ваш CSS никогда не загружается и не сохраняется нигде.