Formateur CSS / SCSS
Embellit ou minifie CSS/SCSS/LESS, trie les propriétés et supprime les doublons.
Votre CSS est formaté localement dans votre navigateur et rien n'est envoyé à un serveur.
Besoin d'embellir aussi du JavaScript ? Essayez le Formateur JS.
À propos de Formateur CSS / SCSS
Ce formateur css embellit ou minifie CSS, SCSS et LESS avec Prettier, avec des options pour trier les déclarations par ordre alphabétique et supprimer les propriétés en double. Utilisez-le comme embellisseur css pour nettoyer des feuilles de style désordonnées, ou comme formateur scss et formateur less lorsque vous travaillez avec des préprocesseurs. Passez en mode minify pour retirer les commentaires et les espaces et produire un CSS de production compact. Conçu pour les développeurs front-end, designers et ingénieurs QA qui ont besoin de styles cohérents et lisibles ou d'un moyen rapide de formater css en ligne avant un commit ou une revue de code. Vous pouvez choisir tabulations ou espaces pour l'indentation, choisir la syntaxe correspondant à votre fichier et réutiliser la sortie prettier css partout. Tout est traité localement dans votre navigateur, vos feuilles de style ne quittent jamais votre appareil et rien n'est envoyé à un serveur.
Fonctionnalités
- Embellit ou minifie CSS, SCSS et LESS avec Prettier
- Choisissez le mode de syntaxe (CSS, SCSS ou LESS) pour une analyse fidèle
- Trie les propriétés par ordre alphabétique dans chaque règle (CSS pur)
- Supprime les déclarations en double du CSS pur
- Choisissez tabulations ou espaces pour l'indentation
- Le mode minify retire les commentaires et les espaces pour la production
- Reformate les règles imbriquées et les media queries de façon cohérente
- Tout s'exécute dans votre navigateur
Comment utiliser Formateur CSS / SCSS
- Collez votre CSS, SCSS ou LESS dans la zone de saisie.
- Choisissez le mode de syntaxe (CSS, SCSS ou LESS) correspondant à votre fichier.
- Sélectionnez Embellir pour formater ou Minifier pour compacter la sortie.
- Activez Trier les propriétés, Dédupliquer ou Tabulations pour affiner le résultat.
- Copiez ou téléchargez le CSS formaté depuis le panneau de sortie.
Exemple
Entrée
.btn{color:#FFF;padding:8px;color:#fff;}
Sortie
.btn {
color: #fff;
padding: 8px;
}
Mode embellir avec les déclarations en double supprimées.
Erreurs courantes et dépannage
- Le tri ou la déduplication des propriétés n'a aucun effet sur SCSS ou LESS. — Le tri et la suppression des doublons s'appliquent au CSS pur ; passez le mode de syntaxe en CSS si vous voulez que ces options s'exécutent.
- Les boutons Trier les propriétés et Dédupliquer sont absents de la barre d'outils. — Ces boutons n'apparaissent qu'en mode Embellir avec la syntaxe CSS sélectionnée ; désactivez Minifier et choisissez CSS pour les afficher.
- Le CSS minifié est difficile à éditer ensuite. — Conservez votre fichier source original ; la sortie minifiée est destinée à la production, pas à une édition ultérieure.
- La sortie ne se formate pas car la mauvaise syntaxe est sélectionnée. — Faites correspondre le mode de syntaxe à votre code, par exemple choisissez SCSS pour l'imbrication et les variables, afin que Prettier l'analyse correctement.
- L'indentation ne correspond pas au style de votre projet. — Activez l'option Tabulations pour basculer entre tabulations et espaces avant de copier.
Foire aux questions
- Qu'est-ce que le Formateur CSS d'ArrayKit ?
- C'est un formateur css basé sur le navigateur qui embellit ou minifie CSS, SCSS et LESS avec Prettier, et peut trier les propriétés par ordre alphabétique et supprimer les déclarations en double dans le CSS pur.
- Comment minifier du CSS avec le Formateur CSS ?
- Collez votre feuille de style, choisissez le mode de syntaxe correspondant, puis sélectionnez Minifier pour retirer les commentaires et les espaces et produire un CSS de production compact à copier ou télécharger.
- Le Formateur CSS prend-il en charge SCSS et LESS ?
- Oui. Choisissez la syntaxe (CSS, SCSS ou LESS) et il l'analyse en conséquence. Le tri des propriétés et la déduplication s'appliquent au CSS pur.
- Le Formateur CSS peut-il trier les propriétés par ordre alphabétique ?
- Oui. En mode Embellir avec CSS sélectionné, activez Trier les propriétés pour réordonner les déclarations par ordre alphabétique dans chaque règle.
- Quel moteur formate le CSS ?
- L'embellissement utilise Prettier, la sortie correspond donc aux mêmes conventions que Prettier applique dans votre éditeur et vos outils de build.
- Mon CSS est-il envoyé quelque part par le Formateur CSS ?
- Non. Le formateur css s'exécute entièrement dans votre navigateur, vos feuilles de style sont traitées localement et ne quittent jamais votre appareil.
Outils associés
- Formateur JS / TS — Embellit ou minifie JavaScript, TypeScript et JSX/TSX avec les options de Prettier.
- Formateur HTML — Embellit ou minifie le HTML, met en forme le CSS/JS en ligne et prévisualise le résultat.
- Formateur XML — Embellit, minifie et valide le XML, et convertit XML ↔ JSON.
- Formateur SQL — Met en forme le SQL pour MySQL, PostgreSQL, SQL Server, SQLite, BigQuery et Oracle.
- Convertisseur de couleurs CSS — Convertit entre HEX, RGB et HSL avec un échantillon en direct.
- Vérificateur de contraste — Vérifie le rapport de contraste WCAG et la conformité AA/AAA entre deux couleurs.
- Optimiseur SVG — Minifie le SVG : supprime commentaires, métadonnées et résidus d’éditeur, et réduit les espaces.
- Formateur JSON — Embellit, minifie et valide le JSON avec la localisation des erreurs.
Tous les outils ArrayKit