CSS-verktyg

Allt-i-ett-CSS-verktygslåda: formatera/snygga till, minifiera/komprimera, validera syntax, kompilera SCSS/Sass & LESS till CSS och invertera CSS tillbaka till SCSS eller LESS.
All bearbetning sker lokalt i webbläsaren — data laddas aldrig upp till någon server.
Läge:
Indata CSS / SCSS / LESS / SASS
Utdata
Så här används den: Klistra in CSS/SCSS/LESS/SASS i den vänstra textrutan, välj ett läge och klicka på Bearbeta (eller skriv helt enkelt — bearbetning sker automatiskt vid inmatning).
Så fungerar varje läge
CSS-formatering: Formaterar CSS med konsekvent indrag (2/4 blanksteg eller tabbar), en egenskap per rad. Hanterar nästlade at-regler som @media, @keyframes, @supports. Bevarar kommentarer (både /* */ och enradiga). Ändra väljaren Indrag för att växla mellan 2 blanksteg, 4 blanksteg eller tabbar.
Minifiera: Tar bort allt onödigt blanksteg, alla kommentarer och överflödiga tecken för att få fram den mest kompakta CSS:en. Idealiskt för produktionsdistribution för att minska filstorlek och bandbredd. Kontrollera statistikfältet för att se komprimeringsgraden.
Validera: Tolkar CSS:en och kontrollerar syntaxfel. Rapporterar tolkningsfel med exakta rad- och kolumnnummer. Visar även statistik: antal regler, selektorer, deklarationer och at-regler.
SCSS-formatering: Formaterar om SCSS/Sass-formatmallar med konsekvent indrag. Hanterar all SCSS-specifik syntax: $variabler, @mixin/@include, @extend, @if/@for/@each-kontrollflöde, #{$var}-interpolation och enradiga //-kommentarer. Bevarar den nästlade selektorstrukturen och indrar nästlade block korrekt. Ändra väljaren Indrag för att växla mellan 2 blanksteg, 4 blanksteg eller tabbar.
LESS-formatering: Formaterar om LESS-formatmallar med konsekvent indrag. Hanterar all LESS-specifik syntax: @variabler, parametriska mixins, guards (when), @{var}-interpolation, sammanslagning och enradiga //-kommentarer. Bevarar den nästlade selektorstrukturen och indrar nästlade block korrekt. Ändra väljaren Indrag för att växla mellan 2 blanksteg, 4 blanksteg eller tabbar.
SCSS → CSS: Kompilerar SCSS/Sass-formatmallar till vanlig CSS med den officiella Dart Sass-kompilatorn (v1.102). Stöder variabler ($var), nästning, mixins (@mixin, @include), funktioner, @extend, @if/@for/@each-kontrollflöde och moderna Sass-moduler (@use, @forward). Sass-kompilatorn (~5,4 MB) läses in lat vid första användningen av det här läget.
LESS → CSS: Kompilerar LESS-formatmallar till vanlig CSS. Stöder variabler (@var), nästning, mixins, parametriska mixins, operationer, funktioner, guards och import (@import). Kompilatorn (~150 KB) läses in lat vid första användningen av det här läget.
SASS → CSS: Kompilerar indragen SASS-syntax (.sass-filer, inga klammerparenteser, inga semikolon) till vanlig CSS med Dart Sass. Indragen SASS använder betydelsefullt blanksteg i stället för klammerparenteser, vilket gör den mer koncis. Samma Dart Sass-kompilator (~5,4 MB) hanterar både SCSS- och indragen SASS-syntax.
CSS → SCSS: Konverterar standard-CSS till SCSS-syntax med automatisk omstrukturering av nästning. Upptäcker BEM-liknande mönster och flyttar .parent-child-selektorer till &-child-nästlade block. Omvandlar efterkommandeselektorer till nästlade regler, pseudoklassselektorer till &:state och extraherar upprepade anpassade CSS-egenskaper till SCSS-$variabler. Om CSS:en har en platt, repetitiv struktur hjälper verktyget till att omstrukturera den till renare nästlad SCSS.
CSS → LESS: Konverterar standard-CSS till LESS-syntax med automatisk omstrukturering av nästning. Samma slags nästning som CSS→SCSS: upptäcker upprepade överordnade mönster, efterkommandeselektorer och pseudoklasser. Extraherar upprepade anpassade CSS-egenskaper till LESS-@variabler. Utdata är ren, nästlad LESS-kod.
Kaskad, specificitet och varför stilar slåss

När flera regler riktar sig mot samma element avgör specificiteten vinnaren: inline-stilar slår id:n, id:n slår klasser, klasser slår elementselektorer, och källordningen avgör oavgjort läge. Flaggan !important åsidosätter denna aritmetik — och gör nästa åsidosättning så mycket svårare.

Specificitet räknas per selektor, inte summeras från kontexten — en mer specifik regel vinner oavsett var den står i formatmallen.