Instrumente CSS

Un instrument complet pentru CSS: formatare/înfrumusețare, minificare/compactare, validare a sintaxei, compilare SCSS/Sass și LESS în CSS și conversie inversă de la CSS la SCSS sau LESS.
Toată prelucrarea are loc local în browser — datele nu se încarcă niciodată pe vreun server.
Mod:
CSS / SCSS / LESS / SASS de intrare
Ieșire
Cum se folosește: CSS/SCSS/LESS/SASS se lipește în caseta din stânga, se alege un mod și se apasă Procesare (sau se scrie direct — procesarea automată are loc la introducere).
Cum funcționează fiecare mod
Formatare CSS: formatează CSS cu indentare consecventă (2/4 spații sau tab-uri), câte o proprietate pe linie. Tratează regulile at imbricate, precum @media, @keyframes, @supports. Păstrează comentariile (atât /* */, cât și cele pe o singură linie). Se schimbă selectorul Indentare pentru a trece între 2 spații, 4 spații sau tab-uri.
Minificare: elimină toate spațiile albe inutile, comentariile și caracterele redundante pentru a obține cel mai compact CSS. Ideal pentru publicarea în producție, pentru a reduce dimensiunea fișierului și lățimea de bandă. Bara de statistici arată raportul de compresie.
Validare: analizează CSS-ul și verifică erorile de sintaxă. Raportează erorile de analiză cu numărul exact al liniei și coloanei. Afișează și statistici: numărul de reguli, selectori, declarații și reguli at.
Formatare SCSS: reformatează foile de stil SCSS/Sass cu indentare consecventă. Tratează toată sintaxa specifică SCSS: $variabile, @mixin/@include, @extend, fluxul de control @if/@for/@each, interpolarea #{$var} și comentariile pe o singură linie //. Păstrează structura selectorilor cu imbricare și indentează corect blocurile cu imbricare. Se schimbă selectorul Indentare pentru a trece între 2 spații, 4 spații sau tab-uri.
Formatare LESS: reformatează foile de stil LESS cu indentare consecventă. Tratează toată sintaxa specifică LESS: @variabile, mixine parametrice, gărzi (when), interpolarea @{var}, îmbinarea și comentariile pe o singură linie //. Păstrează structura selectorilor cu imbricare și indentează corect blocurile cu imbricare. Se schimbă selectorul Indentare pentru a trece între 2 spații, 4 spații sau tab-uri.
SCSS → CSS: compilează foile de stil SCSS/Sass în CSS simplu, folosind compilatorul oficial Dart Sass (v1.102). Acceptă variabile ($var), imbricare, mixine (@mixin, @include), funcții, @extend, fluxul de control @if/@for/@each și modulele moderne Sass (@use, @forward). Compilatorul Sass (~5,4 MB) se încarcă la prima utilizare a acestui mod.
LESS → CSS: compilează foile de stil LESS în CSS simplu. Acceptă variabile (@var), imbricare, mixine, mixine parametrice, operații, funcții, gărzi și importuri (@import). Compilatorul (~150 KB) se încarcă la prima utilizare a acestui mod.
SASS → CSS: compilează sintaxa SASS indentată (fișiere .sass, fără acolade, fără punct și virgulă) în CSS simplu, folosind Dart Sass. SASS indentat folosește spațiul alb semnificativ în loc de acolade, ceea ce îl face mai concis. Același compilator Dart Sass (~5,4 MB) tratează atât sintaxa SCSS, cât și SASS indentat.
CSS → SCSS: convertește CSS standard în sintaxa SCSS cu refactorizarea automată a imbricării. Detectează modele asemănătoare BEM și mută selectorii .parent-child în blocuri imbricate &-child. Convertește selectorii descendenți în reguli imbricate, selectorii pseudo-clasă în &:stare și extrage proprietățile personalizate CSS repetate în $variabile SCSS. Dacă CSS-ul are o structură plată și repetitivă, acest instrument ajută la refactorizarea lui într-un SCSS imbricat, mai curat.
CSS → LESS: convertește CSS standard în sintaxa LESS cu refactorizarea automată a imbricării. Același tip de imbricare ca la CSS→SCSS: detectează modelele repetate de părinte, selectorii descendenți și pseudo-clasele. Extrage proprietățile personalizate CSS repetate în @variabile LESS. Rezultatul este un cod LESS curat, imbricat.
Cascada, specificitatea și de ce se bat stilurile

Când mai multe reguli vizează același element, specificitatea decide câștigătorul: stilurile inline bat id-urile, id-urile bat clasele, clasele bat selectorii de element, iar ordinea din sursă rupe egalitățile. Marcajul !important suprascrie acest calcul — și face următoarea suprascriere cu atât mai dificilă.

Specificitatea se calculează pentru fiecare selector, nu se adună din context — o regulă mai specifică învinge indiferent unde apare în foaia de stil.