CSS-værktøjer

Alt-i-én CSS-værktøjskasse: formatér/pynt, minificér/komprimér, valider syntaks, kompilér SCSS/Sass & LESS til CSS, og konvertér CSS tilbage til SCSS eller LESS.
Al behandling sker lokalt i browseren — data uploades aldrig til nogen server.
Tilstand:
Input CSS / SCSS / LESS / SASS
Output
Sådan bruges det: Indsæt CSS/SCSS/LESS/SASS i det venstre tekstfelt, vælg en tilstand, og klik på Process (eller skriv blot — automatisk behandling ved input).
Sådan virker hver tilstand
CSS-formatering: Formaterer CSS med ensartet indrykning (2/4 mellemrum eller tabulatorer), én egenskab pr. linje. Håndterer indlejrede at-regler som @media, @keyframes, @supports. Bevarer kommentarer (både /* */ og enkeltlinjede). Skift Indrykning-valget for at skifte mellem 2 mellemrum, 4 mellemrum eller tabulatorer.
Minificér: Fjerner al unødvendig whitespace, kommentarer og overflødige tegn for at give den mest kompakte CSS. Ideel til produktionsudrulning for at reducere filstørrelse og båndbredde. Se statuslinjen for at se komprimeringsforholdet.
Valider: Parser CSS'en og kontrollerer for syntaksfejl. Rapporterer parsefejl med præcise linje- og kolonnenumre. Viser også statistik: antal regler, selektorer, deklarationer og at-regler.
SCSS-formatering: Omformaterer SCSS/Sass-stylesheets med ensartet indrykning. Håndterer al SCSS-specifik syntaks: $variabler, @mixin/@include, @extend, @if/@for/@each-kontrolflow, #{$var}-interpolation og enkeltlinjede //-kommentarer. Bevarer indlejret selektorstruktur og indrykker indlejrede blokke korrekt. Skift Indrykning-valget for at skifte mellem 2 mellemrum, 4 mellemrum eller tabulatorer.
LESS-formatering: Omformaterer LESS-stylesheets med ensartet indrykning. Håndterer al LESS-specifik syntaks: @variabler, parametriske mixins, guards (when), @{var}-interpolation, sammenlægning og enkeltlinjede //-kommentarer. Bevarer indlejret selektorstruktur og indrykker indlejrede blokke korrekt. Skift Indrykning-valget for at skifte mellem 2 mellemrum, 4 mellemrum eller tabulatorer.
SCSS → CSS: Kompilerer SCSS/Sass-stylesheets til almindelig CSS med den officielle Dart Sass-kompilator (v1.102). Understøtter variabler ($var), indlejring, mixins (@mixin, @include), funktioner, @extend, @if/@for/@each-kontrolflow og moderne Sass-moduler (@use, @forward). Sass-kompilatoren (~5,4 MB) indlæses først, når tilstanden tages i brug første gang.
LESS → CSS: Kompilerer LESS-stylesheets til almindelig CSS. Understøtter variabler (@var), indlejring, mixins, parametriske mixins, operationer, funktioner, guards og import (@import). Kompilatoren (~150 KB) indlæses først, når tilstanden tages i brug første gang.
SASS → CSS: Kompilerer indrykket SASS-syntaks (.sass-filer, ingen klammer, intet semikolon) til almindelig CSS med Dart Sass. Indrykket SASS bruger betydningsfuld whitespace i stedet for klammer, hvilket gør det mere kortfattet. Den samme Dart Sass-kompilator (~5,4 MB) håndterer både SCSS- og indrykket SASS-syntaks.
CSS → SCSS: Konverterer standard-CSS til SCSS-syntaks med automatisk omstrukturering af indlejring. Registrerer BEM-lignende mønstre og flytter .parent-child-selektorer ind i &-child-indlejrede blokke. Omdanner efterkommerselektorer til indlejrede regler, pseudoklasse-selektorer til &:state og udtrækker gentagne CSS-brugerdefinerede egenskaber til SCSS-$variabler. Har CSS'en en flad, gentagende struktur, hjælper dette værktøj med at omstrukturere den til renere, indlejret SCSS.
CSS → LESS: Konverterer standard-CSS til LESS-syntaks med automatisk omstrukturering af indlejring. Samme slags indlejring som CSS→SCSS: registrerer gentagne forældremønstre, efterkommerselektorer og pseudoklasser. Udtrækker gentagne CSS-brugerdefinerede egenskaber til LESS-@variabler. Outputtet er ren, indlejret LESS-kode.
Kaskade, specificitet og hvorfor stilarter slås

Når flere regler rammer det samme element, afgør specificiteten vinderen: inline-stilarter slår id'er, id'er slår klasser, klasser slår elementselektorer, og rækkefølgen i kilden afgør uafgjort. Flaget !important tilsidesætter denne regning — og gør den næste tilsidesættelse så meget sværere.

Specificitet vurderes pr. selektor, ikke summeret ud fra konteksten — en mere specifik regel vinder uanset hvor i stylesheetet den står.