Outils CSS

Une boîte à outils CSS tout-en-un : formatage et mise en forme, minification et compactage, validation de la syntaxe, compilation de SCSS/Sass et LESS en CSS, et conversion inverse du CSS vers SCSS ou LESS.
Tout le traitement se fait localement dans votre navigateur — vos données ne sont jamais envoyées à un serveur.
Mode :
CSS / SCSS / LESS / SASS en entrée
Sortie
Mode d’emploi : collez votre CSS/SCSS/LESS/SASS dans la zone de gauche, choisissez un mode, puis cliquez sur Traiter (ou tapez simplement — traitement automatique à la saisie).
Fonctionnement de chaque mode
Formatage CSS : met en forme le CSS avec une indentation cohérente (2 ou 4 espaces, ou tabulations), une propriété par ligne. Gère les at-rules imbriquées comme @media, @keyframes et @supports. Conserve les commentaires (/* */ et sur une seule ligne). Modifiez le sélecteur Indentation pour passer de 2 espaces à 4 espaces, ou aux tabulations.
Minifier : supprime tous les espaces inutiles, les commentaires et les caractères redondants pour produire le CSS le plus compact. Idéal pour un déploiement en production afin de réduire la taille des fichiers et la bande passante. Consultez la barre de statistiques pour voir le taux de compression.
Valider : analyse le CSS et vérifie la syntaxe. Signale les erreurs d’analyse avec le numéro exact de ligne et de colonne. Affiche aussi des statistiques : nombre de règles, de sélecteurs, de déclarations et d’at-rules.
Formatage SCSS : remet en forme les feuilles de style SCSS/Sass avec une indentation cohérente. Gère toute la syntaxe propre à SCSS : $variables, @mixin/@include, @extend, structures de contrôle @if/@for/@each, interpolation #{$var} et commentaires sur une seule ligne //. Conserve la structure des sélecteurs imbriqués et indente correctement les blocs imbriqués. Modifiez le sélecteur Indentation pour passer de 2 espaces à 4 espaces, ou aux tabulations.
Formatage LESS : remet en forme les feuilles de style LESS avec une indentation cohérente. Gère toute la syntaxe propre à LESS : @variables, mixins paramétriques, gardes (when), interpolation @{var}, fusion et commentaires sur une seule ligne //. Conserve la structure des sélecteurs imbriqués et indente correctement les blocs imbriqués. Modifiez le sélecteur Indentation pour passer de 2 espaces à 4 espaces, ou aux tabulations.
SCSS → CSS : compile les feuilles de style SCSS/Sass en CSS standard à l’aide du compilateur officiel Dart Sass (v1.102). Prend en charge les variables ($var), l’imbrication, les mixins (@mixin, @include), les fonctions, @extend, les structures de contrôle @if/@for/@each, et les modules Sass modernes (@use, @forward). Le compilateur Sass (environ 5,4 Mo) est chargé à la demande lors de la première utilisation de ce mode.
LESS → CSS : compile les feuilles de style LESS en CSS standard. Prend en charge les variables (@var), l’imbrication, les mixins, les mixins paramétriques, les opérations, les fonctions, les gardes et les importations (@import). Le compilateur (environ 150 Ko) est chargé à la demande lors de la première utilisation de ce mode.
SASS → CSS : compile la syntaxe SASS indentée (fichiers .sass, sans accolades ni points-virgules) en CSS standard, à l’aide de Dart Sass. Le SASS indenté utilise des espaces significatifs au lieu des accolades, ce qui le rend plus concis. Le même compilateur Dart Sass (environ 5,4 Mo) gère la syntaxe SCSS et la syntaxe SASS indentée.
CSS → SCSS : convertit le CSS standard en syntaxe SCSS avec une réorganisation automatique des imbrications. Détecte les motifs de type BEM et transforme les sélecteurs .parent-child en blocs imbriqués &-child. Convertit les sélecteurs descendants en règles imbriquées, les sélecteurs de pseudo-classes en &:état, et extrait les propriétés personnalisées CSS répétées en $variables SCSS. Si votre CSS présente une structure plate et répétitive, cet outil vous aidera à la réorganiser en SCSS imbriqué plus propre.
CSS → LESS : convertit le CSS standard en syntaxe LESS avec une réorganisation automatique des imbrications. Même type d’imbrication que CSS→SCSS : détecte les motifs de parents répétés, les sélecteurs descendants et les pseudo-classes. Extrait les propriétés personnalisées CSS répétées vers des @variables LESS. La sortie est un code LESS imbriqué et propre.
Cascade, spécificité et pourquoi les styles se contredisent

Lorsque plusieurs règles ciblent le même élément, la spécificité désigne le gagnant : les styles en ligne l’emportent sur les identifiants, les identifiants sur les classes, les classes sur les sélecteurs d’éléments, et l’ordre dans le source départage les ex æquo. L’indicateur !important outrepasse ce calcul — et rend le prochain remplacement d’autant plus difficile.

La spécificité se calcule par sélecteur, et non en additionnant le contexte — une règle plus spécifique l’emporte, quel que soit son emplacement dans la feuille de style.