Formateur SCSS

Ce que fait ce formateur SCSS

Le SCSS permet d’imbriquer des règles, de stocker des valeurs dans des $variables, de réutiliser des blocs avec @mixin et de ranger des réglages dans des maps. Cette puissance fait grossir les fichiers vite, et dès que plusieurs personnes modifient la même feuille de style, l’indentation dérive. L’un écrit color:$brand, un autre color : $brand ;, et les blocs imbriqués finissent à des profondeurs aléatoires.

Ce formateur SCSS remet en forme le code pour que chaque niveau d’imbrication soit indenté de la même façon, que chaque déclaration soit sur sa propre ligne et que les espaces autour des deux-points et des accolades soient cohérents. Il utilise Prettier 3 avec son analyseur SCSS, entièrement dans votre navigateur.

Mode d’emploi

1. Collez votre SCSS dans la zone de gauche. Il est formaté dès le collage.
2. Vous pouvez aussi appuyer sur Ouvrir un fichier pour charger un fichier .scss, ou sur Exemple pour voir un exemple.
3. Choisissez l’Indentation : 2 espaces, 4 espaces ou tabulations.
4. Choisissez la Largeur de ligne. Les longues listes de sélecteurs, les maps et les arguments d’include passent à la ligne au-delà.
5. Activez Guillemets simples si votre guide de style les préfère.
6. Appuyez sur Formater, ou sur Ctrl+Entrée dans la zone de saisie.
7. Appuyez sur Copier, ou sur Télécharger pour enregistrer un fichier .scss.

Après le premier formatage, le résultat suit vos modifications pendant la frappe. En cas de problème, un message comme Ligne 2, colonne 3 : Unclosed block apparaît sous les zones, et Afficher dans l’entrée place le curseur à cet endroit.

Avant et après

Un extrait SCSS compressé avec une variable, un mixin et des règles imbriquées :

$brand:#3b82f6;@mixin card($pad:16px){padding:$pad;border-radius:8px}.nav{display:flex;gap:1rem;a{color:$brand;&:hover{text-decoration:underline}}.btn{@include card(12px)}}

Après Formater avec 2 espaces :

$brand: #3b82f6;
@mixin card($pad: 16px) {
  padding: $pad;
  border-radius: 8px;
}
.nav {
  display: flex;
  gap: 1rem;
  a {
    color: $brand;
    &:hover {
      text-decoration: underline;
    }
  }
  .btn {
    @include card(12px);
  }
}

Chaque niveau d’imbrication ajoute une indentation : vous voyez d’un coup d’œil que &:hover appartient au lien situé dans .nav.

Les maps Sass sont réparties sur plusieurs lignes, une clé par ligne :

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

Avec Guillemets simples activé, @use "sass:math"; devient @use 'sass:math';. Les commentaires de ligne restent exactement là où ils étaient :

// Header styles
.header {
  .logo {
    width: 120px;
  }
}

Erreurs et limites

Le formateur doit analyser votre fichier avant de pouvoir l’écrire. Une accolade fermante manquante est le problème le plus fréquent. Pour cette saisie :

.nav {
  a { color: red;

le message est Ligne 2, colonne 3 : Unclosed block, qui désigne le a { jamais fermé. Les messages de l’analyseur sont en anglais.

Quelques points à connaître :

• L’outil vérifie la syntaxe, pas le sens. Une variable non définie ou un mixin inexistant n’est pas signalé. Le compilateur Sass les trouve.
• Il ne réordonne pas les propriétés et ne trie pas les sélecteurs. Votre ordre est conservé.
• La syntaxe indentée .sass n’est pas prise en charge. Convertissez-la d’abord en SCSS, ou formatez-la dans un éditeur qui la gère.
• Il n’y a pas de Minifier sur cette page. Minifier du SCSS n’a pas de sens, puisque les navigateurs n’exécutent que du CSS. Compilez avec Sass, puis minifiez le CSS obtenu.

Conseils pour un SCSS plus propre

• Limitez l’imbrication. Trois niveaux est une limite courante dans les guides de style, car une imbrication profonde crée des sélecteurs longs et fragiles.
• Mettez les variables et les maps dans un partiel séparé comme _tokens.scss et chargez-le avec @use.
• Formatez avant de commiter. Sinon, de petits changements d’espacement se mélangent aux vrais changements en revue de code.
• Si vous travaillez sur le CSS compilé, le formateur CSS peut aussi le minifier.

Autres façons de formater du SCSS

• VS Code : installez l’extension Prettier, ouvrez le fichier et lancez Mettre en forme le document (Maj+Alt+F sous Windows, Maj+Option+F sous macOS).
• Ligne de commande : npx prettier --write "src/**/*.scss" formate tous les fichiers SCSS d’un dossier.
• IDE JetBrains comme WebStorm ont une action intégrée de reformatage du code, et peuvent utiliser Prettier s’il est installé dans le projet.

Cette page ne demande aucune installation et garde votre code sur votre appareil, ce qui en fait une option rapide pour un extrait tiré d’un ticket, d’un CodePen ou d’un message d’un collègue. Pour le balisage qui utilise ces styles, essayez le formateur HTML, et pour les scripts, le formateur JavaScript.