Formateur SCSS

Formatez et indentez le code SCSS dans une structure claire et lisible dans votre navigateur.

Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers ne sont jamais envoyés à un serveur.

$color:#3366ff;
.button {
  color:$color;
  &:hover {
    opacity:.8;
  }
}

Fonction de ce formateur

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.

Utilisation

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.

Comportement

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.

Limite importante

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.

Vérification recommandée

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.

Confidentialité

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

Questions Fréquentes

Que fait Formateur SCSS ?
Formatez et indentez le code SCSS dans une structure claire et lisible dans votre navigateur.
Cet outil SCSS modifie-t-il le comportement ?
Il ne modifie que la mise en page ou les espaces supprimables. Vérifiez la sortie si le code utilise une syntaxe inhabituelle.
Mon code est-il transféré ?
Le traitement est local et votre code n'est jamais transféré.