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é.
Outils Similaires
Formateur GraphQL
Formatez et indentez le code GraphQL dans une structure claire et lisible dans votre navigateur.
Minificateur JSON
Minifiez JSON en supprimant les espaces et commentaires inutiles pour réduire la sortie.
Formateur YAML
Formatez et nettoyez vos documents YAML instantanément dans votre navigateur.