Sass in CSS
Compila Sass e SCSS in CSS online. Conversione in tempo reale con output esteso o compresso, numeri di riga degli errori e supporto completo per variabili, mixin e annidamento.
Qual è la differenza tra Sass e SCSS?
SCSS è la sintassi più recente, simile al CSS, che usa parentesi graffe e punti e virgola. Sass (la sintassi indentata) usa indentazione e nuove righe. Questo strumento compila entrambe: basta scegliere la sintassi nel menu a tendina.
Quali funzionalità di Sass sono supportate?
Il compilatore usa il motore ufficiale Dart Sass, quindi sono supportate variabili, annidamento, mixin, @include, funzioni, @use, @extend, direttive di controllo come @if e @each e lo stile di output compresso.
Come ottengo CSS compresso?
Imposta il menu dello stile di output su Compresso prima di compilare. Spazi e punto e virgola finale vengono rimossi, producendo il foglio di stile più piccolo possibile.
Perché l'errore mostra un numero di riga?
Quando il codice contiene un errore di sintassi, il motore Sass riporta la riga e la colonna esatte in cui l'analisi è fallita, e lo strumento le mostra sopra l'output per correggere rapidamente.
Il mio codice Sass viene caricato su un server?
No. Il motore Dart Sass completo è incluso nella pagina e compila localmente nel browser. I tuoi fogli di stile non lasciano mai il dispositivo: sicuro anche per progetti privati.
Posso compilare @import di file locali?
No. Il compilatore lavora su un singolo frammento in memoria e non accede al tuo file system, quindi gli import basati su file e il @use di partial esterni non possono essere risolti.
Funziona offline?
Sì. Dopo che pagina e pacchetto del compilatore sono stati caricati una volta, la compilazione avviene interamente sulla tua macchina, senza connessione.
Come uso il risultato?
Copia il CSS compilato negli appunti o scaricalo come style.css con i pulsanti sotto l'output, poi collegalo nell'HTML o incollalo nel foglio di stile del progetto.
Come usare Sass in CSS
Questo compilatore esegue il motore ufficiale Dart Sass interamente nel tuo browser. Incolla SCSS o Sass indentato e ottieni CSS pulito all'istante — variabili, mixin, annidamento e funzioni supportati, nulla viene caricato.
- Incolla il tuo Sass o SCSS nella casella di input, oppure premi Esempio per caricare una demo funzionante con variabile e mixin.
- Scegli la sintassi (SCSS o Sass indentato) e lo stile di output (Expanded o Compressed) dai menu a tendina.
- Con la Compilazione in tempo reale attiva, il CSS appare mentre scrivi; altrimenti premi Compila per eseguirlo manualmente.
- In caso di errore di sintassi, il numero di riga esatto e il messaggio compaiono sopra l'output per correggere al volo.
- Usa Copia o Scarica sotto l'output per portarti via il foglio di stile compilato come style.css.
Scegli lo stile di output Compressed per minificare il foglio di stile — ottimo per build di produzione direttamente dal sorgente.
Strumenti correlati
- Abbellitore CSS Formatta e abbellisci il codice CSS istantaneamente. Converti CSS minificato in codice leggibile e ben indentato con opzioni personalizzabili.
- Minificatore CSS Minificatore CSS online gratuito. Comprimi e ottimizza istantaneamente il codice CSS rimuovendo spazi, commenti e caratteri non necessari. Riduci le dimensioni del file per migliori prestazioni web.
- Generatore Gradienti CSS Crea stupendi gradienti CSS visivamente. Genera gradienti lineari, radiali e conici con più punti di colore, angoli e posizioni. Copia istantaneamente codice CSS pronto per la produzione.
- Generatore CSS Flexbox Generatore CSS Flexbox visuale con anteprima dal vivo. Regola le proprietà flex e ottieni codice CSS pronto all'uso.
- Calcolatrice Chmod Calcolatrice chmod online gratuita per visualizzare e calcolare i permessi dei file Linux con caselle di controllo. Converti istantaneamente tra notazione numerica (755, 644) e simbolica (rwxr-xr-x). Supporta permessi speciali come setuid, setgid, sticky bit.
- Tabella ASCII Riferimento completo per la codifica dei caratteri ASCII con codici decimali, esadecimali, ottali, binari, entità HTML e descrizioni. Ricerca e filtro istantanei.
- Tester di Richieste HTTP Testa le API REST direttamente nel browser. Invia richieste GET, POST, PUT, DELETE con header, body e parametri personalizzati. Visualizza stato, header e corpo JSON della risposta istantaneamente.
- Generatore .htaccess Genera regole .htaccess Apache per reindirizzamenti, riscritture, header di sicurezza, caching e altro.