Formateur SCSS

Réorganise le texte de type SCSS avec des sauts après les accolades ouvrantes, fermantes et les points-virgules, avec deux espaces par niveau imbriqué — y compris l'imbrication SCSS, les sélecteurs parents de type &:hover et les blocs @mixin/@include, qui ne sont pour ce formateur que des blocs délimités par des accolades.

Collez du SCSS dans l'éditeur : le résultat est actualisé immédiatement. Copiez-le lorsqu'il est prêt ou utilisez Reset pour vider l'éditeur ; Reset ne restaure pas l'exemple initial.

Hors chaînes entre guillemets et commentaires, les suites d'espaces sont réduites et les déclarations séparées après les points-virgules, de la même façon pour une règle CSS classique, un sélecteur imbriqué ou le corps d'un mixin. Le contenu cité, les échappements, les commentaires de bloc et les commentaires de ligne // reconnus sont conservés ; l'interpolation comme #{$variable} reste inchangée car ce ne sont que des caractères ordinaires dans une déclaration.

Il s'agit d'un formateur léger basé sur les caractères, pas d'un compilateur, analyseur ou linter SCSS — il ne compile pas Sass en CSS, ne résout ni variables ni directives @mixin/@include/@extend, ne valide pas la profondeur d'imbrication et ne signale pas les erreurs de syntaxe propres à Sass. Il ne normalise pas non plus les espaces autour des deux-points, ne trie pas les propriétés et ne développe pas les raccourcis.

Comme le formateur ne réagit qu'aux accolades, guillemets et points-virgules, des constructions inhabituelles — sélecteurs & profondément imbriqués, directives de contrôle comme @if/@each, ou interpolation sans guillemets — peuvent produire une indentation surprenante. Relisez la sortie et compilez-la avec votre chaîne d'outils Sass habituelle avant de vous y fier en production.

En collant `.card{&:hover{color:blue}@include flex-row;}`, on obtient un bloc `.card {` contenant un bloc `&:hover {` indenté avec `color: blue;` à l'intérieur, suivi de `@include flex-row;` sur sa propre ligne indentée — le formateur traite le sélecteur imbriqué et l'appel au mixin de la même façon, comme du contenu délimité par des accolades.

Le traitement s'effectue localement dans le navigateur ; le SCSS collé n'est pas transféré.