Formatter SCSS
Formattate i fogli di stile Sass SCSS con questo Formatter SCSS. Incollate SCSS: lo strumento dispone le regole annidate, le variabili, i mixin, le inclusioni, i selettori genitore e le direttive di controllo con un rientro di due spazi, una dichiarazione per riga, uno spazio dopo i due punti delle proprietà e l'aggiunta dei punti e virgola mancanti. Le interpolazioni e i commenti vengono mantenuti, così chi sviluppa interfacce può riordinare parziali e frammenti senza compilarli.
Domande frequenti
Come funziona il Formatter SCSS?
Legge il foglio di stile come una sequenza di token, ad esempio parentesi graffe, punti e virgola, due punti, stringhe e commenti, e ne ricostruisce la struttura. Ogni parentesi graffa di apertura avvia un blocco rientrato e ogni dichiarazione termina su una riga propria.
È supportato l'annidamento?
Sì, le regole annidate e i selettori genitore come &:hover hanno un rientro di un livello rispetto al genitore, con due spazi per livello. I due punti dei selettori restano attaccati, quindi &:hover non viene separato.
Come vengono formattati variabili, mixin e inclusioni?
Alle variabili come $color: #333; viene aggiunto uno spazio dopo i due punti, mentre @mixin e @include mantengono i propri argomenti con uno spazio dopo ogni virgola. Le direttive di controllo come @if, @each e @for hanno uno spazio prima della parentesi.
Le interpolazioni vengono mantenute?
Sì, le interpolazioni come #{$name} vengono copiate esattamente come sono scritte. Questo vale anche per quelle nei selettori, come .icon-#{$name}, e nei nomi delle proprietà.
Lo strumento compila o convalida il mio SCSS?
No, non compila in CSS né controlla la sintassi, quindi formatta anche frammenti incompleti. Usate il compilatore Sass per trovare gli errori e generare CSS.
I commenti vengono mantenuti?
Sì. I commenti di riga che iniziano con // terminano alla fine della riga, mentre i commenti di blocco vengono mantenuti nella posizione originale.
Funziona con la sintassi Sass con rientro?
No, è progettato per SCSS, che usa parentesi graffe e punti e virgola. I file con la sintassi .sass con rientro non hanno parentesi graffe da cui ricavare il rientro, quindi convertiteli prima in SCSS.
Posso cambiare l'indentazione?
No, l'output usa sempre due spazi e il formatter non ha opzioni. Di conseguenza, lo stesso foglio di stile produce sempre lo stesso risultato.
Perché il risultato è racchiuso in un blocco di codice scss?
L'output viene restituito come blocco di codice Markdown contrassegnato come scss, così viene visualizzato con l'evidenziazione della sintassi. Copiate le righe tra i delimitatori nel vostro file .scss.
Qual è la dimensione massima del foglio di stile?
Fino a 5 MB per esecuzione; gli input più grandi vengono rifiutati con un messaggio. L'output è identico a quello dell'opzione SCSS del Code Formatter.