Convertitore SCSS a CSS
Converti codice SCSS/SASS in CSS
Input SCSS
CSS Compilato
Esempi SCSS a CSS
Le variabili e il nesting SCSS vengono compilati in CSS standard. Esempio:
Variabili e selettori annidati
Input SCSS:
CSS Compilato:
Usa Esempio sopra per caricare altri dati di esempio.
Cos'è SCSS a CSS?
SCSS è un preprocessore CSS che aggiunge variabili, nesting, mixin e funzioni. I browser non eseguono SCSS — richiedono CSS standard. Questo strumento compila il tuo SCSS in CSS pronto per il browser. La documentazione Sass definisce la sintassi.
La compilazione funziona interamente nel tuo browser. Nulla viene inviato a un server. L'output è CSS standard. Per la direzione inversa (CSS a SCSS) usa CSS a SCSS. Per Less usa Less a CSS.
Come Usare Questo Strumento
Incolla o Carica SCSS
Copia il tuo SCSS o SASS e incollalo nell'editor sinistro. Puoi anche cliccare su Carica per caricare un file .scss o .sass. Il pulsante Esempio carica dati di esempio. SCSS non valido mostra un errore.
Visualizza il CSS Compilato
Il pannello destro mostra il CSS compilato. Le variabili vengono risolte, il nesting viene appiattito e i mixin vengono espansi. L'output è CSS standard utilizzabile da qualsiasi browser.
Copia o Scarica
Usa Copia o Scarica. Per formattare l'output usa CSS Formatter. Per minificare usa CSS Minifier.
Quando SCSS a CSS è Utile
Quando hai SCSS da un progetto, design system o codebase legacy ma hai bisogno di CSS standard — per un test rapido, template email o sistemi senza strumenti di build — questa compilazione aiuta. Framework come Bootstrap e Foundation usano SCSS. Per le build di produzione, Dart Sass e webpack compilano SCSS. Utile anche per il debug: vedi esattamente quale CSS produce il tuo SCSS.
Molti framework (Bootstrap, Foundation) usano SCSS. Se personalizzi variabili o estrai stili, compilare qui ti dà il CSS finale. Per convertire CSS esistente in struttura SCSS usa CSS a SCSS.
Domande Frequenti
Differenza tra SCSS e SASS?
SCSS usa le parentesi graffe come CSS. SASS usa l'indentazione (senza parentesi). Entrambi compilano nello stesso CSS. Questo strumento supporta entrambe le sintassi.
Supporta @import?
Gli import parziali potrebbero non essere risolti se i file non sono caricati. Per progetti multi-file usa strumenti di build come Dart Sass o un bundler. Vedi la CLI Sass.
I miei dati sono privati?
Sì. La compilazione funziona interamente nel tuo browser. Nessun dato viene inviato a nessun server.
Come vengono gestiti mixin e funzioni?
I mixin e le funzioni vengono espansi durante la compilazione. Il CSS di output contiene i valori risolti. Le funzioni complesse sono supportate nei limiti delle funzionalità del compilatore.
Posso usarlo con Bootstrap?
Il SCSS di Bootstrap ha molti file parziali e variabili. Per la compilazione completa di Bootstrap usa la build ufficiale o npm. Questo strumento funziona per SCSS a file singolo o snippet.
Strumenti Correlati
Sass/SCSS: sass-lang.com e documentazione Sass. MDN CSS e W3C CSS definiscono il formato di output.