Extracteur de variables CSS

• Extraction de variables CSS instantanée : notre extracteur de variables CSS parcourt toute votre feuille de style et trouve chaque déclaration --custom-property en quelques millisecondes. Extrayez les variables CSS de n'importe quelle feuille de style — design systems, bibliothèques de composants ou fichiers de thème — instantanément dans votre navigateur.
• Extracteur de variables CSS en ligne sécurisé : toute l'extraction de variables CSS s'exécute entièrement dans votre navigateur. Le code de votre feuille de style ne quitte jamais votre appareil, garantissant une confidentialité totale lorsque vous extrayez des variables CSS en ligne.
• Extracteur de variables CSS sans installation : utilisez notre extracteur de variables CSS directement dans n'importe quel navigateur, sans téléchargement, plugin ni compte. Extrayez les propriétés personnalisées CSS depuis n'importe quel appareil — ordinateur, tablette ou mobile — gratuitement.
• 7 formats d'export pour chaque workflow : notre extracteur de variables CSS exporte en blocs CSS :root, JSON, objets JavaScript, objets const TypeScript, maps SCSS, listes à plat et tableaux Markdown — couvrant les pipelines de design tokens, la documentation et les workflows de génération de code.

• Documentation des design tokens : les équipes de design system utilisent notre extracteur de variables CSS pour générer des tableaux Markdown de tous les design tokens de leur feuille de style. Exportez chaque variable --color, --spacing et --font dans un format prêt pour la documentation, instantanément.
• Intégration dans les pipelines de design tokens : les ingénieurs frontend utilisent notre extracteur de variables CSS pour exporter les propriétés personnalisées CSS en JSON afin de les intégrer à des outils de design tokens comme Style Dictionary, Theo ou des pipelines de build personnalisés.
• Migration et refactorisation de thèmes : les développeurs migrant entre frameworks CSS ou refactorisant des fichiers de thème utilisent notre extracteur de variables CSS pour auditer toutes les propriétés personnalisées d'une feuille de style. Identifiez chaque variable, sa valeur et le sélecteur auquel elle appartient.
• Intégration de design system en TypeScript : les développeurs TypeScript utilisent notre extracteur de variables CSS pour générer des objets const typés à partir de leurs variables CSS. Bénéficiez de l'autocomplétion et de la vérification de types pour les noms de propriétés personnalisées CSS dans votre code TypeScript.
• Conversion de design system en SCSS : les équipes convertissant les propriétés personnalisées CSS en variables SCSS utilisent notre extracteur pour générer des maps SCSS à partir de leurs déclarations :root. Exportez toutes les variables CSS sous forme de $map SCSS prête à l'emploi dans votre base de code SCSS.
• Audit de mode sombre et de thèmes : les développeurs créant des thèmes en mode sombre utilisent notre extracteur de variables CSS pour comparer les variables entre sélecteurs. Filtrez par :root vs [data-theme="dark"] pour voir exactement quelles variables sont redéfinies dans chaque thème.

Les propriétés personnalisées CSS (aussi appelées variables CSS) sont des entités définies par les auteurs de CSS qui contiennent des valeurs spécifiques à réutiliser dans tout un document. Elles sont définies avec le préfixe -- (par exemple --color-primary: #3b82f6) et accessibles via la fonction var(). Les propriétés personnalisées CSS sont définies dans un sélecteur CSS — le plus souvent :root pour la portée globale — et se propagent en cascade comme n'importe quelle autre propriété CSS. Notre extracteur de variables CSS parcourt toute votre feuille de style et trouve chaque déclaration de propriété personnalisée, quel que soit le sélecteur où elle apparaît.

1. Collez votre CSS : saisissez n'importe quelle feuille de style CSS — un fichier de design system complet, une feuille de style de composant ou un fichier de thème. Notre extracteur de variables CSS accepte tout CSS valide, y compris les feuilles de style minifiées, les règles à sélecteurs multiples et les déclarations de propriétés personnalisées imbriquées.
2. Extraction instantanée dans le navigateur : cliquez sur Extraire les variables et l'outil parcourt chaque ligne à la recherche de motifs --propriété: valeur, suit le sélecteur auquel chaque variable appartient et applique vos filtres de portée et de tri. Tout le traitement s'exécute localement dans votre navigateur — votre CSS ne quitte jamais votre appareil.
3. Copiez ou téléchargez la sortie : les variables CSS extraites sont affichées dans le format choisi. Copiez-les dans le presse-papiers ou téléchargez-les en fichier .css, .json, .ts ou .scss.

• Bloc CSS :root : regroupe les variables extraites par sélecteur et les formate en blocs CSS valides — prêts à coller directement dans une feuille de style ou un fichier de design tokens.
• JSON / JavaScript / TypeScript : exporte les variables en objets clé-valeur pour les pipelines de design tokens, les systèmes de theming JavaScript ou les bases de code TypeScript avec des références de noms de variables typées.
• Map SCSS : génère une map SCSS $css-variables à utiliser dans les design systems basés sur SCSS, permettant un accès programmatique aux valeurs des variables CSS dans les fonctions et mixins SCSS.
• Tableau Markdown : crée un tableau prêt pour la documentation avec les colonnes nom de variable, valeur et sélecteur — parfait pour les guides de style, la documentation de design system et les références en revue de code.

Le filtre de portée vous permet d'extraire uniquement les variables :root (design tokens globaux), uniquement les variables non-:root (redéfinitions au niveau des composants), ou toutes les variables de la feuille de style entière. Les options de tri vous permettent d'ordonner les variables par ordre d'apparition à la source (tel qu'elles apparaissent dans le CSS), par ordre alphabétique de nom, ou regroupées par sélecteur — ce qui facilite l'organisation de grands design systems comptant des centaines de propriétés personnalisées.