Экстрактор CSS-переменных

• Мгновенное извлечение CSS-переменных: наш экстрактор CSS-переменных просматривает весь ваш стилевой файл и находит каждую декларацию --custom-property за миллисекунды. Извлекайте CSS-переменные из любого стилевого файла — дизайн-систем, библиотек компонентов или файлов тем — мгновенно в браузере.
• Безопасный онлайн-экстрактор CSS-переменных: всё извлечение CSS-переменных выполняется целиком в браузере. Код вашего стилевого файла никогда не покидает устройство, обеспечивая полную конфиденциальность при извлечении CSS-переменных онлайн.
• Экстрактор CSS-переменных без установки: используйте наш экстрактор CSS-переменных прямо в любом браузере — без загрузок, плагинов и аккаунта. Извлекайте пользовательские свойства CSS с любого устройства — настольного, планшета или телефона — бесплатно.
• 7 форматов экспорта для любого рабочего процесса: наш экстрактор CSS-переменных экспортирует в CSS-блоки :root, JSON, объекты JavaScript, объекты const TypeScript, SCSS-карты, плоские списки и таблицы Markdown, покрывая пайплайны дизайн-токенов, документацию и сценарии генерации кода.

• Документирование дизайн-токенов: команды дизайн-систем используют наш экстрактор CSS-переменных для создания таблиц Markdown со всеми дизайн-токенами из стилевого файла. Экспортируйте каждую переменную --color, --spacing и --font в готовый для документации формат мгновенно.
• Интеграция в пайплайны дизайн-токенов: фронтенд-инженеры используют наш экстрактор CSS-переменных, чтобы экспортировать пользовательские свойства CSS в JSON для интеграции с инструментами дизайн-токенов вроде Style Dictionary, Theo или собственных пайплайнов сборки.
• Миграция и рефакторинг тем: разработчики, мигрирующие между CSS-фреймворками или рефакторящие файлы тем, используют наш экстрактор CSS-переменных для аудита всех пользовательских свойств в стилевом файле. Определите каждую переменную, её значение и селектор, к которому она относится.
• Интеграция дизайн-системы в TypeScript: TypeScript-разработчики используют наш экстрактор CSS-переменных, чтобы генерировать типобезопасные объекты const из своих CSS-переменных. Получите автодополнение и проверку типов для имён пользовательских свойств CSS в вашем TypeScript-коде.
• Перевод дизайн-системы на SCSS: команды, переводящие пользовательские свойства CSS в SCSS-переменные, используют наш экстрактор для генерации SCSS-карт из деклараций :root. Экспортируйте все CSS-переменные как SCSS-$map, готовую к использованию в вашей SCSS-кодовой базе.
• Аудит тёмной темы и тем: разработчики, создающие тёмные темы, используют наш экстрактор CSS-переменных для сравнения переменных между селекторами. Фильтруйте по :root против [data-theme="dark"], чтобы точно увидеть, какие переменные переопределяются в каждой теме.

Пользовательские свойства CSS (также называемые CSS-переменными) — это сущности, определяемые авторами CSS, которые содержат конкретные значения для повторного использования во всём документе. Они задаются с префиксом -- (например, --color-primary: #3b82f6) и доступны через функцию var(). Пользовательские свойства CSS определяются внутри CSS-селектора — чаще всего :root для глобальной области — и наследуются каскадом как любое другое CSS-свойство. Наш экстрактор CSS-переменных просматривает весь ваш стилевой файл и находит каждую декларацию пользовательского свойства, независимо от того, в каком селекторе она встречается.

1. Вставьте свой CSS: введите любой CSS-стилевой файл — полный файл дизайн-системы, стилевой файл компонента или файл темы. Наш экстрактор CSS-переменных принимает любой валидный CSS, включая минифицированные стилевые файлы, правила с несколькими селекторами и вложенные декларации пользовательских свойств.
2. Мгновенное извлечение в браузере: нажмите «Извлечь переменные», и инструмент просмотрит каждую строку на наличие шаблонов --свойство: значение, отследит, к какому селектору относится каждая переменная, и применит ваши фильтры области и сортировки. Вся обработка выполняется локально в браузере — ваш CSS никогда не покидает устройство.
3. Скопируйте или скачайте результат: извлечённые CSS-переменные отображаются в выбранном формате. Скопируйте их в буфер обмена или скачайте как файл .css, .json, .ts или .scss.

• CSS-блок :root: группирует извлечённые переменные по селектору и форматирует их как валидные CSS-блоки — готовые к прямой вставке в стилевой файл или файл дизайн-токенов.
• JSON / JavaScript / TypeScript: экспортирует переменные как объекты «ключ-значение» для пайплайнов дизайн-токенов, систем темизации на JavaScript или TypeScript-кодовых баз с типобезопасными ссылками на имена переменных.
• SCSS-карта: генерирует SCSS-карту $css-variables для дизайн-систем на SCSS, обеспечивая программный доступ к значениям CSS-переменных в SCSS-функциях и миксинах.
• Таблица Markdown: создаёт готовую для документации таблицу с колонками «имя переменной», «значение» и «селектор» — идеально для стайлгайдов, документации дизайн-систем и ссылок в ревью кода.

Фильтр области позволяет извлекать только переменные :root (глобальные дизайн-токены), только переменные вне :root (переопределения на уровне компонентов) или все переменные из всего стилевого файла. Опции сортировки позволяют упорядочивать переменные по порядку в источнике (как они идут в CSS), по алфавиту или с группировкой по селектору — что облегчает организацию крупных дизайн-систем с сотнями пользовательских свойств.