Beautifier SCSS en ligne — Beautifier SCSS

Beautifiez du SCSS/Sass instantanément avec Prettier. Traitement dans le navigateur.

Chargement…
SCSS Beautification
Beautify SCSS online.

Fonctionnalités

Format SCSS with variables and nesting preserved.

Beautify SCSS

Format SCSS with variables and nesting preserved.

Exemple de base

SCSS source

$primary:#2563eb;$spacing:16px;@mixin card-shadow{box-shadow:0 2px 8px rgba(0,0,0,.12)}.card{padding:$spacing;border:1px solid $primary;.title{font-weight:700;color:$primary}@include card-shadow}

Beautified SCSS

$primary: #2563eb; $spacing: 16px; @mixin card-shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .card { padding: $spacing; border: 1px solid $primary; .title { font-weight: 700; color: $primary; } @include card-shadow; }

Options de formatage

Largeur de ligne
Wrap lines at 80, 100 or 120 columns.

Adjust tab width, tabs vs spaces, and quote style in the toolbar.

Formatage avec Prettier

Les variables $primary sont préservées. Pour le CSS voir minificateur CSS.

FAQ — Beautifier SCSS

Beautification

SCSS vs CSS?

Utilisez cet outil pour la syntaxe Sass/SCSS. Pour du CSS brut, essayez le beautifier CSS.

Need to unminify?

Ouvrez le déminifieur SCSS.

Convertisseurs, encodeurs, formateurs et minificateurs au même endroit ? Outils développeurs Ouvrez le catalogue des outils développeurs.

Autres actions pour cette langue

Beautifier SCSSDéminifier SCSS