Strumenti CSS

Un kit CSS completo: formattazione, minificazione, validazione della sintassi, compilazione di SCSS/Sass e LESS in CSS, e conversione inversa da CSS a SCSS o LESS.
Tutta l'elaborazione avviene localmente nel suo browser — i suoi dati non vengono mai caricati su alcun server.
Modalità:
CSS / SCSS / LESS / SASS in input
Output
Come si usa: incolli il suo CSS/SCSS/LESS/SASS nell'area di testo di sinistra, scelga una modalità e prema Elabora (oppure scriva semplicemente — l'elaborazione automatica avviene durante la digitazione).
Come funziona ciascuna modalità
Formattazione CSS: formatta il CSS con un rientro coerente (2/4 spazi o tabulazioni), una proprietà per riga. Gestisce le regole at annidate come @media, @keyframes, @supports. Conserva i commenti (sia /* */ sia quelli su una riga). Cambi il selettore Rientro per passare tra 2 spazi, 4 spazi o tabulazioni.
Minifica: rimuove tutti gli spazi non necessari, i commenti e i caratteri ridondanti per ottenere il CSS più compatto. Ideale per la distribuzione in produzione, per ridurre dimensione del file e banda. Controlli la barra delle statistiche per vedere il rapporto di compressione.
Valida: analizza il CSS e cerca errori di sintassi. Segnala gli errori di analisi con numeri di riga e colonna esatti. Mostra anche le statistiche: numero di regole, selettori, dichiarazioni e regole at.
Formattazione SCSS: riformatta i fogli di stile SCSS/Sass con un rientro coerente. Gestisce tutta la sintassi specifica di SCSS: $variabili, @mixin/@include, @extend, il flusso di controllo @if/@for/@each, l'interpolazione #{$var} e i commenti su una riga //. Conserva la struttura dei selettori annidati e rientra correttamente i blocchi annidati. Cambi il selettore Rientro per passare tra 2 spazi, 4 spazi o tabulazioni.
Formattazione LESS: riformatta i fogli di stile LESS con un rientro coerente. Gestisce tutta la sintassi specifica di LESS: @variabili, mixin parametrici, guardie (when), interpolazione @{var}, merge e i commenti su una riga //. Conserva la struttura dei selettori annidati e rientra correttamente i blocchi annidati. Cambi il selettore Rientro per passare tra 2 spazi, 4 spazi o tabulazioni.
SCSS → CSS: compila i fogli di stile SCSS/Sass in CSS semplice usando il compilatore ufficiale Dart Sass (v1.102). Supporta variabili ($var), annidamento, mixin (@mixin, @include), funzioni, @extend, il flusso di controllo @if/@for/@each e i moduli Sass moderni (@use, @forward). Il compilatore Sass (~5,4 MB) viene caricato in modo differito alla prima volta che usa questa modalità.
LESS → CSS: compila i fogli di stile LESS in CSS semplice. Supporta variabili (@var), annidamento, mixin, mixin parametrici, operazioni, funzioni, guardie e importazioni (@import). Il compilatore (~150 KB) viene caricato in modo differito alla prima volta che usa questa modalità.
SASS → CSS: compila la sintassi SASS indentata (file .sass, senza parentesi graffe né punti e virgola) in CSS semplice usando Dart Sass. Il SASS indentato usa lo spazio bianco come struttura al posto delle parentesi graffe, il che lo rende più conciso. Lo stesso compilatore Dart Sass (~5,4 MB) gestisce sia la sintassi SCSS sia quella SASS indentata.
CSS → SCSS: converte il CSS standard in sintassi SCSS con rifattorizzazione automatica dell'annidamento. Rileva schemi in stile BEM e sposta i selettori .genitore-figlio in blocchi annidati &-figlio. Converte i selettori discendenti in regole annidate, i selettori di pseudo-classe in &:stato ed estrae le proprietà personalizzate CSS ripetute in $variabili SCSS. Se il suo CSS ha una struttura piatta e ripetitiva, questo strumento l'aiuterà a rifattorizzarlo in SCSS annidato più pulito.
CSS → LESS: converte il CSS standard in sintassi LESS con rifattorizzazione automatica dell'annidamento. Stesso tipo di annidamento di CSS→SCSS: rileva schemi di genitori ripetuti, selettori discendenti e pseudo-classi. Estrae le proprietà personalizzate CSS ripetute in @variabili LESS. L'output è codice LESS annidato e pulito.
Cascata, specificità e perché gli stili entrano in conflitto

Quando diverse regole si riferiscono allo stesso elemento, è la specificità a decidere il vincitore: gli stili inline battono gli id, gli id battono le classi, le classi battono i selettori di elemento, e l'ordine nel sorgente decide i pareggi. Il flag !important annulla questo calcolo — e rende la successiva sovrascrittura ancora più difficile.

La specificità si calcola per ogni selettore, non si somma dal contesto — una regola più specifica vince ovunque compaia nel foglio di stile.