Nástroje pre CSS

Komplexná sada nástrojov pre CSS: formátovanie/úprava, minifikácia/zhutnenie, overenie syntaxe, kompilácia SCSS/Sass a LESS do CSS a spätný prevod CSS do SCSS alebo LESS.
Všetko spracovanie prebieha lokálne v prehliadači — dáta sa nikdy nenahrávajú na žiadny server.
Režim:
Vstupné CSS / SCSS / LESS / SASS
Výstup
Ako použiť: CSS/SCSS/LESS/SASS sa vloží do ľavého poľa, zvolí sa režim a klikne sa na Spracovať (alebo stačí písať — spracovanie prebieha automaticky pri vstupe).
Ako funguje každý režim
Formátovanie CSS: Formátuje CSS s jednotným odsadením (2/4 medzery alebo tabulátory), jedna vlastnosť na riadok. Zvláda vnorené at-pravidlá ako @media, @keyframes, @supports. Zachováva komentáre (aj /* */, aj jednoriadkové). Výberom v nastavení Odsadenie sa prepína medzi 2 medzerami, 4 medzerami alebo tabulátormi.
Minifikácia: Odstráni všetky zbytočné medzery, komentáre a nadbytočné znaky, aby vznikol čo najkompaktnejší CSS. Ideálne na nasadenie do produkcie, kde sa zmenšuje veľkosť súboru a objem prenesených dát. Pomer kompresie sa zobrazuje v štatistickom riadku.
Overenie: Analyzuje CSS a kontroluje syntaktické chyby. Hlási chyby analýzy s presným číslom riadka a stĺpca. Zobrazuje aj štatistiky: počet pravidiel, selektorov, deklarácií a at-pravidiel.
Formátovanie SCSS: Preformátuje štýlové hárky SCSS/Sass s jednotným odsadením. Zvláda všetku syntax špecifickú pre SCSS: $variables, @mixin/@include, @extend, riadenie toku @if/@for/@each, interpoláciu #{$var} a jednoriadkové komentáre //. Zachováva štruktúru vnorených selektorov a správne odsadzuje vnorené bloky. Výberom v nastavení Odsadenie sa prepína medzi 2 medzerami, 4 medzerami alebo tabulátormi.
Formátovanie LESS: Preformátuje štýlové hárky LESS s jednotným odsadením. Zvláda všetku syntax špecifickú pre LESS: @variables, parametrické mixiny, stráže (when), interpoláciu @{var}, zlučovanie a jednoriadkové komentáre //. Zachováva štruktúru vnorených selektorov a správne odsadzuje vnorené bloky. Výberom v nastavení Odsadenie sa prepína medzi 2 medzerami, 4 medzerami alebo tabulátormi.
SCSS → CSS: Kompiluje štýlové hárky SCSS/Sass do čistého CSS pomocou oficiálneho kompilátora Dart Sass (v1.102). Podporuje premenné ($var), vnorenie, mixiny (@mixin, @include), funkcie, @extend, riadenie toku @if/@for/@each a moderné moduly Sass (@use, @forward). Kompilátor Sass (~5,4 MB) sa načíta až pri prvom použití tohto režimu.
LESS → CSS: Kompiluje štýlové hárky LESS do čistého CSS. Podporuje premenné (@var), vnorenie, mixiny, parametrické mixiny, operácie, funkcie, stráže a importovanie (@import). Kompilátor (~150 KB) sa načíta až pri prvom použití tohto režimu.
SASS → CSS: Kompiluje odsadenú syntax SASS (súbory .sass, bez zložených zátvoriek a bodkočiarok) do čistého CSS pomocou Dart Sass. Odsadená syntax používa význam medzier namiesto zložených zátvoriek, čo ju robí stručnejšou. Rovnaký kompilátor Dart Sass (~5,4 MB) zvláda aj syntax SCSS, aj odsadenú syntax SASS.
CSS → SCSS: Prevádza štandardné CSS do syntaxe SCSS s automatickou refaktorizáciou vnorenia. Zisťuje vzory podobné BEM a selektory .parent-child presúva do vnorených blokov &-child. Potomkovské selektory prevádza na vnorené pravidlá, pseudotriedové selektory na &:state a opakujúce sa vlastné vlastnosti CSS vyčleňuje do premenných SCSS $variables. Ak má CSS plochú, opakujúcu sa štruktúru, tento nástroj pomôže refaktorizovať ju na čistejšie vnorené SCSS.
CSS → LESS: Prevádza štandardné CSS do syntaxe LESS s automatickou refaktorizáciou vnorenia. Rovnaký druh vnorenia ako CSS→SCSS: zisťuje opakujúce sa vzory rodičov, potomkovské selektory a pseudotriedy. Vlastné vlastnosti CSS, ktoré sa opakujú, sa vyčlenia do premenných LESS @variables. Výstup je čistý, vnorený kód LESS.
Kaskáda, špecifickosť a prečo sa štýly biju

Keď viacero pravidiel cieli na ten istý prvok, o víťazovi rozhoduje špecifickosť: vložené štýly prekonajú ID, ID prekonajú triedy, triedy prekonajú selektory prvkov a poradie v zdroji rozhoduje o zhode. Príznak !important toto počítanie prepisuje — a ďalšie prepísanie je potom o to ťažšie.

Špecifickosť sa počíta pre každý selektor, nesčítava sa z kontextu — špecifickejšie pravidlo vyhrá bez ohľadu na to, kde sa v štýlovom hárku nachádza.