Converti Sass (Indented) in CSS Online
Converti Sass (sintassi indentata) in CSS pulito, gratis, nel tuo browser.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Perché usarlo
Compila Sass in CSS nel browser
Zero configurazione
Nessun npm install, nessun Node.js. Incolla il tuo Sass e ottieni CSS in pochi secondi.
Dart Sass ufficiale
Usa il compilatore Dart Sass ufficiale via WebAssembly. Piena compatibilità con lo standard attuale.
Totalmente privato
Tutto gira nel tuo browser. Il tuo codice non viene mai inviato ad alcun server.
Sintassi indentata completa
Supporto completo: variabili, mixin, extend, funzioni e cicli nella sintassi .sass indentata.
Come funziona
Tre passaggi, senza complicazioni
Incolla il tuo Sass
Incolla il codice Sass con sintassi indentata nell'editor. Supporta variabili, mixin, extend, funzioni e nesting tramite indentazione.
Compilazione con Dart Sass
Il compilatore Dart Sass ufficiale (WebAssembly) elabora la sintassi indentata e genera CSS valido. Tutto avviene nel browser, senza server.
Copia o scarica il CSS
Ottieni il CSS risultante pronto per qualsiasi progetto web o sistema di build che richieda CSS standard.
FAQ
Hai delle domande?
Sass (sintassi indentata, estensione .sass) usa l'indentazione per definire i blocchi di stile e non richiede parentesi graffe o punti e virgola. SCSS (Sassy CSS, estensione .scss) usa la stessa sintassi di CSS valido con parentesi graffe e punti e virgola. I due sono semanticamente equivalenti e vengono compilati dallo stesso compilatore Dart Sass. La sintassi Sass è più concisa e preferita da chi lavora con linguaggi come Python o CoffeeScript; SCSS è più diffusa perché qualsiasi CSS valido è già SCSS valido.
La sintassi Sass è più concisa e visivamente pulita per chi apprezza l'indentazione come struttura. Non richiede parentesi graffe (che aggiungono rumore visivo) né punti e virgola alla fine di ogni dichiarazione. Questo rende il codice più simile a pseudocodice. Tuttavia, SCSS è più popolare perché è un superset di CSS: puoi copiare CSS esistente in un file .scss senza modifiche. La scelta tra i due è principalmente una preferenza stilistica.
Sì. Le due sintassi sono funzionalmente equivalenti: entrambe supportano variabili ($var), mixin (@mixin/@include), extend (@extend), funzioni, cicli (@for/@each/@while), il modulo system (@use/@forward), e tutte le altre funzionalità Sass. La differenza è solo sintattica — come scrivi il codice, non cosa puoi fare.
Sì. Dart Sass supporta pienamente il modulo system moderno (@use e @forward) anche per la sintassi indentata. Con @use puoi caricare file Sass come moduli con namespace espliciti, evitando conflitti di nomi. Con @forward puoi riesportare i contenuti di un modulo da un file di indice. Poiché questo strumento gira nel browser, i percorsi nei @use funzionano solo per moduli definiti nello stesso editor.
Sass richiede indentazione consistente all'interno di un file: non puoi mescolare tab e spazi. Se il tuo file usa solo tab o solo spazi per l'indentazione, il compilatore Dart Sass lo gestisce correttamente. Se ci sono indentazioni miste, il compilatore mostra un errore che indica la riga problematica, in modo che tu possa correggerla.
No. Il compilatore Dart Sass gira interamente nel tuo browser tramite WebAssembly. Il tuo codice Sass non lascia mai il tuo dispositivo e non viene trasmesso a nessun server esterno.
Converti Sass in CSS: compilatore Dart Sass online, gratis
Sass (Syntactically Awesome Style Sheets) è il preprocessore CSS originale, creato da Hampton Catlin nel 2006 e implementato inizialmente da Natalie Weizenbaum. La sintassi indentata (estensione .sass) era la prima forma del linguaggio, precedente a SCSS. Usa l'indentazione per definire i blocchi — simile a Python o YAML — senza parentesi graffe e senza punti e virgola. Questo strumento usa il compilatore Dart Sass ufficiale compilato in WebAssembly: l'implementazione di riferimento di Sass, lo stesso motore usato da Vite, webpack sass-loader, Angular CLI e Node-Sass in versioni moderne.
La compilazione Sass nel browser è utile in diversi scenari: testare snippet di codice Sass con sintassi indentata trovati in documentazioni o progetti legacy, convertire file .sass in CSS per progetti che non hanno più un compilatore Sass configurato, fare debug di mixin e funzioni per vedere il CSS generato, e imparare la sintassi Sass indentata sperimentando con il codice e vedendo immediatamente il risultato. Ruby Sass, l'implementazione originale, è stata ritirata nel marzo 2019; LibSass è stata deprecata nell'ottobre 2020. Dart Sass è l'unica implementazione ufficialmente mantenuta.
Dal punto di vista tecnico, la sintassi indentata Sass e SCSS sono due rappresentazioni dello stesso AST (Abstract Syntax Tree). Il compilatore Dart Sass analizza entrambe le sintassi e le compila attraverso lo stesso backend. Le funzionalità sono identiche: il modulo system (@use/@forward), i built-in modules (sass:math, sass:color, sass:string, sass:list, sass:map, sass:selector, sass:meta), le funzioni di colore, gli operatori matematici, e i cicli. Se hai codebase con file .sass legacy che usano la vecchia sintassi @import (deprecata), Dart Sass mostra avvisi di deprecazione che guidano la migrazione al nuovo modulo system.