Konwerter SCSS do CSS
Konwertuj codice SCSS/SASS in CSS
Input SCSS
CSS Compilato
Esempi SCSS do CSS
Le variabili e il nesting SCSS vengono compilati in CSS standard. Przyklad:
Variabili e selettori annidati
Input SCSS:
CSS Compilato:
Usa Przyklad sopra per caricare altri dane di esempio.
Cos'è SCSS do CSS?
SCSS è un preprocessore CSS che aggiunge variabili, nesting, mixin e funzioni. I browser non eseguono SCSS — richiedono CSS standard. Questo narzedzie 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 do SCSS) usa CSS do SCSS. Per Less usa Less a CSS.
Jak uzywac tego narzedzia
Incolla o Wczytaj SCSS
Kopiuj il tuo SCSS o SASS e incollalo nell'editor sinistro. Puoi anche cliccare su Wczytaj per caricare un plik .scss o .sass. Il pulsante Przyklad carica dane di esempio. SCSS nieprawidlowy 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.
Kopiuj o Pobierz
Usa Kopiuj o Pobierz. Per formattare l'output usa CSS Formatter. Per minificare usa CSS Minifier.
Quando SCSS do 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 narzedzia 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 do SCSS.
Czesto zadawane pytania
Differenza tra SCSS e SASS?
SCSS usa le parentesi graffe come CSS. SASS usa l'indentazione (senza parentesi). Entrambi compilano nello stesso CSS. Questo narzedzie supporta entrambe le sintassi.
Supporta @import?
Gli import parziali potrebbero non essere risolti se i plik non sono caricati. Per progetti multi-plik usa narzedzia di build come Dart Sass o un bundler. Vedi la CLI Sass.
I miei dane 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 plik parziali e variabili. Per la compilazione completa di Bootstrap usa la build ufficiale o npm. Questo narzedzie funziona per SCSS a plik singolo o snippet.
Powiazane narzedzia
Sass/SCSS: sass-lang.com e documentazione Sass. MDN CSS e W3C CSS definiscono il formato di output.