CSS-verktøy

Alt-i-ett CSS-verktøykasse: formater/pynt, minimer/kompakt, valider syntaks, kompiler SCSS/Sass og LESS til CSS, og konverter CSS tilbake til SCSS eller LESS.
All behandling skjer lokalt i nettleseren — data lastes aldri opp til noen server.
Modus:
Inndata CSS / SCSS / LESS / SASS
Utdata
Slik brukes det: Lim inn CSS/SCSS/LESS/SASS i det venstre tekstfeltet, velg en modus og klikk på Behandle (eller skriv bare — automatisk behandling ved inndata).
Slik virker hver modus
CSS-formatering: Formaterer CSS med konsekvent innrykk (2/4 mellomrom eller tabulatorer), én egenskap per linje. Håndterer nøstede at-regler som @media, @keyframes, @supports. Beholder kommentarer (både /* */ og enlinjes). Endre Innrykk-valget for å bytte mellom 2 mellomrom, 4 mellomrom eller tabulatorer.
Minimer: Fjerner alt unødvendig mellomrom, alle kommentarer og overflødige tegn for å lage så kompakt CSS som mulig. Ideelt for produksjon for å redusere filstørrelse og båndbredde. Se statuslinjen for å se komprimeringsforholdet.
Valider: Tolker CSS-en og sjekker for syntaksfeil. Rapporterer tolkingsfeil med nøyaktige linje- og kolonnenummer. Viser også statistikk: antall regler, selektorer, deklarasjoner og at-regler.
SCSS-formatering: Formaterer SCSS/Sass-stilark på nytt med konsekvent innrykk. Håndterer all SCSS-spesifikk syntaks: $variabler, @mixin/@include, @extend, @if/@for/@each-kontrollflyt, #{$var}-interpolasjon og //-enlinjes kommentarer. Beholder nøstet selektorstruktur og innrykker nøstede blokker riktig. Endre Innrykk-valget for å bytte mellom 2 mellomrom, 4 mellomrom eller tabulatorer.
LESS-formatering: Formaterer LESS-stilark på nytt med konsekvent innrykk. Håndterer all LESS-spesifikk syntaks: @variabler, parametriske mixins, vakter (when), @{var}-interpolasjon, sammenslåing og enlinjes //-kommentarer. Beholder nøstet selektorstruktur og innrykker nøstede blokker riktig. Endre Innrykk-valget for å bytte mellom 2 mellomrom, 4 mellomrom eller tabulatorer.
SCSS → CSS: Kompilerer SCSS/Sass-stilark til vanlig CSS med den offisielle Dart Sass-kompilatoren (v1.102). Støtter variabler ($var), nesting, mixins (@mixin, @include), funksjoner, @extend, @if/@for/@each-kontrollflyt og moderne Sass-moduler (@use, @forward). Sass-kompilatoren (~5,4 MB) lastes første gang denne modusen tas i bruk.
LESS → CSS: Kompilerer LESS-stilark til vanlig CSS. Støtter variabler (@var), nesting, mixins, parametriske mixins, operasjoner, funksjoner, vakter og import (@import). Kompilatoren (~150 KB) lastes først når denne modusen tas i bruk.
SASS → CSS: Kompilerer innrykket SASS-syntaks (.sass-filer, ingen klammer, ingen semikolon) til vanlig CSS med Dart Sass. Innrykket SASS bruker betydningsfullt mellomrom i stedet for klammeparenteser, noe som gjør det mer kortfattet. Den samme Dart Sass-kompilatoren (~5,4 MB) håndterer både SCSS og innrykket SASS.
CSS → SCSS: Konverterer standard CSS til SCSS-syntaks med automatisk omstrukturering av nesting. Oppdager BEM-lignende mønstre og flytter .forelder-barn-selektorer inn i nøstede &-barn-blokker. Gjør etterkommerselektorer om til nøstede regler, pseudoklasseselektorer til &:tilstand, og trekker ut gjentatte CSS-egendefinerte egenskaper til SCSS-$variabler. Hvis CSS-en har en flat, repeterende struktur, hjelper dette verktøyet med å omstrukturere den til ryddigere, nøstet SCSS.
CSS → LESS: Konverterer standard CSS til LESS-syntaks med automatisk omstrukturering av nesting. Samme type nesting som CSS→SCSS: oppdager gjentatte forelderstrukturer, etterkommerselektorer og pseudoklasser. Trekker ut gjentatte CSS-egendefinerte egenskaper til LESS-@variabler. Utdataene er ren, nøstet LESS-kode.
Kaskade, spesifisitet og hvorfor stiler krangler

Når flere regler retter seg mot samme element, avgjør spesifisiteten vinneren: innlinjestiler slår id-er, id-er slår klasser, klasser slår elementselektorer, og rekkefølgen i kilden avgjør uavgjort. Flagget !important overstyrer denne regningen — og gjør neste overstyring enda vanskeligere.

Spesifisitet beregnes per selektor, ikke summeres fra konteksten — en mer spesifikk regel vinner uansett hvor i stilarket den står.