Nástroje pro CSS

Všestranná sada nástrojů pro CSS: formátování a zpřehlednění, minifikace a zhuštění, validace syntaxe, kompilace SCSS/Sass a LESS do CSS a zpětný převod CSS zpět do SCSS nebo LESS.
Veškeré zpracování probíhá lokálně ve vašem prohlížeči — vaše data se nikdy nenahrávají na žádný server.
Režim:
Vstupní CSS / SCSS / LESS / SASS
Výstup
Jak použít: Vložte své CSS/SCSS/LESS/SASS do levého textového pole, zvolte režim a klikněte na Zpracovat (nebo jen pište — zpracování probíhá automaticky při vstupu).
Jak funguje každý režim
Formátování CSS: Formátuje CSS s konzistentním odsazením (2/4 mezery nebo tabulátory), jedna vlastnost na řádek. Zvládá vnořená at-pravidla jako @media, @keyframes, @supports. Zachovává komentáře (jak /* */, tak jednořádkové). Výběrem možnosti Odsazení přepnete mezi 2 mezerami, 4 mezerami nebo tabulátory.
Minifikace: Odstraní veškeré zbytečné mezery, komentáře a nadbytečné znaky a vytvoří co nejkompaktnější CSS. Ideální pro produkční nasazení, kde se snižuje velikost souboru a přenesená data. Pruh se statistikami ukazuje poměr komprese.
Validace: Zpracuje CSS a zkontroluje chyby syntaxe. Hlásí chyby parsování s přesným číslem řádku a sloupce. Zobrazuje také statistiky: počet pravidel, selektorů, deklarací a at-pravidel.
Formátování SCSS: Přeformátuje šablony SCSS/Sass s konzistentním odsazením. Zvládá veškerou syntaxi specifickou pro SCSS: $variables, @mixin/@include, @extend, řídicí tok @if/@for/@each, interpolaci #{$var} a jednořádkové komentáře //. Zachovává strukturu vnořených selektorů a správně odsazuje vnořené bloky. Výběrem možnosti Odsazení přepnete mezi 2 mezerami, 4 mezerami nebo tabulátory.
Formátování LESS: Přeformátuje šablony LESS s konzistentním odsazením. Zvládá veškerou syntaxi specifickou pro LESS: @variables, parametrické mixiny, podmínky (when), interpolaci @{var}, slučování a jednořádkové komentáře //. Zachovává strukturu vnořených selektorů a správně odsazuje vnořené bloky. Výběrem možnosti Odsazení přepnete mezi 2 mezerami, 4 mezerami nebo tabulátory.
SCSS → CSS: Kompiluje šablony SCSS/Sass do prostého CSS pomocí oficiálního kompilátoru Dart Sass (v1.102). Podporuje proměnné ($var), vnoření, mixiny (@mixin, @include), funkce, @extend, řídicí tok @if/@for/@each a moderní moduly Sass (@use, @forward). Kompilátor Sass (~5,4 MB) se načte při prvním použití tohoto režimu.
LESS → CSS: Kompiluje šablony LESS do prostého CSS. Podporuje proměnné (@var), vnoření, mixiny, parametrické mixiny, operace, funkce, podmínky (guards) a importy (@import). Kompilátor (~150 KB) se načte při prvním použití tohoto režimu.
SASS → CSS: Kompiluje odsazenou syntaxi SASS (soubory .sass, bez složených závorek a středníků) do prostého CSS pomocí Dart Sass. Odsazená syntaxe SASS používá významné odsazení místo složených závorek, a je proto stručnější. Stejný kompilátor Dart Sass (~5,4 MB) zvládá jak SCSS, tak odsazený SASS.
CSS → SCSS: Převádí standardní CSS na syntaxi SCSS s automatickým refaktorováním vnoření. Rozpoznává vzory podobné BEM a přesouvá selektory .parent-child do vnořených bloků &-child. Potomkové selektory převádí na vnořená pravidla, pseudotřídy na &:state a opakované vlastní vlastnosti CSS vytahuje do proměnných SCSS $variables. Pokud má vaše CSS plochou a opakující se strukturu, tento nástroj vám pomůže přepsat ji do čistšího vnořeného SCSS.
CSS → LESS: Převádí standardní CSS na syntaxi LESS s automatickým refaktorováním vnoření. Stejný druh vnoření jako u CSS→SCSS: rozpozná opakované vzory rodičů, potomkové selektory a pseudotřídy. Opakované vlastní vlastnosti CSS vytahuje do proměnných LESS @variables. Výstupem je čistý, vnořený kód LESS.
Kaskáda, specifičnost a proč se styly přetahují

Když několik pravidel cílí na stejný prvek, o vítězi rozhoduje specifičnost: vnitřní styly porážejí ID, ID porážejí třídy, třídy porážejí selektory prvků a pořadí ve zdroji rozhoduje o shodě. Příznak !important tento výpočet přepisuje — a další přepsání se tím stává o to obtížnějším.

Specifičnost se počítá pro každý selektor zvlášť, nesčítá se podle kontextu — přesnější pravidlo vyhraje, bez ohledu na to, kde v šabloně stylů se nachází.