Formattatore SCSS

Cosa fa questo formattatore SCSS

L’SCSS ti permette di annidare le regole, salvare valori in $variabili, riusare blocchi con @mixin e tenere le impostazioni in mappe. Proprio per questo i file crescono in fretta, e quando più persone modificano lo stesso foglio di stile l’indentazione comincia a sbandare. Uno scrive color:$brand, un altro color : $brand ;, e i blocchi annidati finiscono a profondità casuali.

Questo formattatore SCSS riscrive il codice in modo che ogni livello di annidamento abbia lo stesso rientro, ogni dichiarazione stia su una riga propria e gli spazi intorno a due punti e parentesi graffe siano coerenti. Usa Prettier 3 con il suo parser SCSS e funziona interamente nel tuo browser.

Come si usa

1. Incolla il codice SCSS nel riquadro a sinistra. Viene formattato nel momento in cui lo incolli.
2. Puoi anche premere Apri file per caricare un file .scss, oppure Esempio per vedere un esempio.
3. Scegli il Rientro: 2 spazi, 4 spazi o tabulazioni.
4. Scegli la Larghezza riga. Elenchi di selettori, mappe e argomenti di include lunghi vanno a capo oltre questa larghezza.
5. Attiva Virgolette singole se la tua guida di stile le preferisce.
6. Premi Formatta, oppure Ctrl+Invio nel riquadro di input.
7. Premi Copia, oppure Scarica per salvare un file .scss.

Dopo la prima formattazione, il risultato segue le tue modifiche mentre scrivi. Se qualcosa non va, sotto i riquadri compare un messaggio come Riga 2, colonna 3: Unclosed block e Mostra nell’input porta il cursore in quel punto.

Prima e dopo

Un frammento SCSS compresso con una variabile, un mixin e regole annidate:

$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)}}

Dopo Formatta con 2 spazi:

$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);
  }
}

Ogni livello di annidamento aggiunge un rientro, così vedi a colpo d’occhio che &:hover appartiene al link dentro .nav.

Le mappe Sass vengono distribuite su più righe, una chiave per riga:

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

Con Virgolette singole attivo, @use "sass:math"; diventa @use 'sass:math';. I commenti di riga restano esattamente dov’erano:

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

Errori e limiti

Il formattatore deve analizzare il file prima di poterlo riscrivere. Una parentesi graffa di chiusura mancante è il problema più comune. Con questo input:

.nav {
  a { color: red;

il messaggio è Riga 2, colonna 3: Unclosed block (blocco non chiuso), che indica la a { mai chiusa.

Alcune cose da sapere:

• Lo strumento controlla la sintassi, non il significato. Una variabile non definita o un mixin inesistente non vengono segnalati: li trova il compilatore Sass.
• Non riordina le proprietà e non ordina i selettori. Il tuo ordine resta com’è.
• La sintassi indentata .sass non è supportata. Convertila prima in SCSS, oppure formattala in un editor che la supporta.
• In questa pagina non c’è Minifica. Minificare l’SCSS non ha senso, perché i browser eseguono solo CSS. Compila con Sass, poi minifica il CSS risultante.

Consigli per un SCSS più pulito

• Tieni l’annidamento poco profondo. Tre livelli sono un limite comune nelle guide di stile, perché un annidamento profondo crea selettori lunghi e fragili.
• Metti variabili e mappe in un partial separato come _tokens.scss e caricalo con @use.
• Formatta prima del commit. Altrimenti piccole modifiche di spaziatura finiscono mescolate alle modifiche vere durante la code review.
• Se lavori sul CSS compilato, il formattatore CSS può anche minificarlo.

Altri modi per formattare l’SCSS

• VS Code: installa l’estensione Prettier, apri il file ed esegui Format Document (Maiusc+Alt+F su Windows, Maiusc+Opzione+F su macOS).
• Riga di comando: npx prettier --write "src/**/*.scss" formatta tutti i file SCSS di una cartella.
• IDE JetBrains come WebStorm hanno un’azione Reformat Code integrata e possono usare Prettier se è installato nel progetto.

Questa pagina non richiede configurazione e tiene il codice sul tuo dispositivo, quindi è una soluzione rapida per un frammento preso da un ticket, da un CodePen o dal messaggio di un collega. Per il markup che usa questi stili prova il formattatore HTML, e per gli script il formattatore JavaScript.