CSS-tools

Alles-in-één CSS-toolbox: opmaken/mooi maken, minimaliseren/compacter maken, syntaxis valideren, SCSS/Sass & LESS naar CSS compileren, en CSS terugconverteren naar SCSS of LESS.
Alle verwerking gebeurt lokaal in uw browser — uw gegevens worden nooit naar een server geüpload.
Modus:
Invoer CSS / SCSS / LESS / SASS
Uitvoer
Gebruik: plak uw CSS/SCSS/LESS/SASS in het linker tekstvak, kies een modus en klik op Verwerken (of typ gewoon — automatisch verwerken bij invoer).
Hoe elke modus werkt
CSS-opmaak: maakt CSS netjes met consistente inspringing (2/4 spaties of tabs), één eigenschap per regel. Verwerkt geneste at-regels zoals @media, @keyframes, @supports. Bewaart commentaar (zowel /* */ als enkele regels). Wijzig de selector Inspringing om te wisselen tussen 2 spaties, 4 spaties of tabs.
Minimaliseren: verwijdert alle onnodige witruimte, commentaar en overbodige tekens om de meest compacte CSS te maken. Ideaal voor productie-uitrol om de bestandsgrootte en bandbreedte te verkleinen. Bekijk de statusbalk om de compressieverhouding te zien.
Valideren: ontleedt de CSS en controleert op syntaxisfouten. Meldt parseerfouten met exacte regel- en kolomnummers. Toont ook statistieken: aantal regels, selectors, declaraties en at-regels.
SCSS-opmaak: maakt SCSS/Sass-stylesheets opnieuw netjes met consistente inspringing. Verwerkt alle SCSS-specifieke syntaxis: $variabelen, @mixin/@include, @extend, @if/@for/@each-besturingsstructuur, #{$var}-interpolatie, en //-commentaar op één regel. Bewaart de geneste selectorstructuur en laat geneste blokken correct inspringen. Wijzig de selector Inspringing om te wisselen tussen 2 spaties, 4 spaties of tabs.
LESS-opmaak: maakt LESS-stylesheets opnieuw netjes met consistente inspringing. Verwerkt alle LESS-specifieke syntaxis: @variabelen, parametrische mixins, guards (when), @{var}-interpolatie, samenvoegen en //-commentaar op één regel. Bewaart de geneste selectorstructuur en laat geneste blokken correct inspringen. Wijzig de selector Inspringing om te wisselen tussen 2 spaties, 4 spaties of tabs.
SCSS → CSS: compileert SCSS/Sass-stylesheets naar gewone CSS met de officiële Dart Sass-compiler (v1.102). Ondersteunt variabelen ($var), nesting, mixins (@mixin, @include), functies, @extend, @if/@for/@each-besturingsstructuur, en moderne Sass-modules (@use, @forward). De Sass-compiler (~5,4 MB) wordt de eerste keer dat u deze modus gebruikt geladen.
LESS → CSS: compileert LESS-stylesheets naar gewone CSS. Ondersteunt variabelen (@var), nesting, mixins, parametrische mixins, bewerkingen, functies, guards en importeren (@import). De compiler (~150 KB) wordt de eerste keer dat u deze modus gebruikt geladen.
SASS → CSS: compileert ingesprongen SASS-syntaxis (.sass-bestanden, zonder accolades en puntkomma's) naar gewone CSS met Dart Sass. Ingesprongen SASS gebruikt betekenisvolle witruimte in plaats van accolades, wat het beknopter maakt. Dezelfde Dart Sass-compiler (~5,4 MB) verwerkt zowel SCSS- als ingesprongen SASS-syntaxis.
CSS → SCSS: zet standaard CSS om naar SCSS-syntaxis met automatische herstructurering van nesting. Herkent BEM-achtige patronen en verplaatst .parent-child-selectors naar geneste blokken &-child. Zet afstammelingselectors om in geneste regels, pseudoklasseselectors in &:state, en haalt herhaalde CSS-eigen eigenschappen uit naar SCSS-$variabelen. Als uw CSS een vlakke, repetitieve structuur heeft, helpt deze tool u die op te schonen tot geneste SCSS.
CSS → LESS: zet standaard CSS om naar LESS-syntaxis met automatische herstructurering van nesting. Dezelfde soort nesting als bij CSS→SCSS: herkent herhaalde oudercombinaties, afstammelingselectors en pseudoklassen. Haalt herhaalde CSS-eigen eigenschappen uit naar LESS-@variabelen. De uitvoer is schone, geneste LESS-code.
Cascade, specificiteit en waarom stijlen met elkaar botsen

Wanneer meerdere regels hetzelfde element aanspreken, bepaalt de specificiteit de winnaar: inline-stijlen winnen van id's, id's winnen van klassen, klassen winnen van elementselectors, en de volgorde in de bron beslist bij gelijkspel. De vlag !important overschrijft deze rekensom — en maakt de volgende overschrijving des te moeilijker.

Specificiteit wordt per selector bepaald, niet opgeteld vanuit de context — een specifiekere regel wint, waar die ook in het stylesheet staat.