CSS-eszközök

Minden egyben CSS-eszköztár: formázás/szépítés, tömörítés/összevonás, szintaxis-ellenőrzés, SCSS/Sass & LESS fordítása CSS-re, valamint a CSS visszaalakítása SCSS-re vagy LESS-re.
Minden feldolgozás helyben, a böngészőben történik — az adatok semmilyen szerverre nem kerülnek feltöltésre.
Mód:
Bemeneti CSS / SCSS / LESS / SASS
Kimenet
Használat: A CSS/SCSS/LESS/SASS kód a bal szövegmezőbe illeszthető, a mód kiválasztása után a Feldolgozás gombbal indítható el (vagy egyszerű gépelés — a bevitel automatikusan feldolgozódik).
Hogyan működik az egyes mód
CSS formázás: A CSS-t egységes behúzással formázza (2/4 szóköz vagy tabulátor), tulajdonságonként egy sorba. Kezeli a beágyazott at-szabályokat, például a @media, @keyframes, @supports szabályokat. Megőrzi a megjegyzéseket (mind a /* */, mind az egysoros). A Behúzás választóval 2 szóköz, 4 szóköz vagy tabulátor között lehet váltani.
Tömörítés: Eltávolít minden felesleges szóközt, megjegyzést és redundáns karaktert, így a legkompaktabb CSS-t adja. Éles telepítésre ideális a fájlméret és a sávszélesség csökkentéséhez. A tömörítési arányt a statisztikasávon lehet megnézni.
Ellenőrzés: Feldolgozza a CSS-t, és szintaxishibákat keres. A feldolgozási hibákat pontos sor- és oszlopszámmal jelzi. Statisztikát is mutat: a szabályok, választók, deklarációk és at-szabályok számát.
SCSS formázás: Az SCSS/Sass-stíluslapokat egységes behúzással formázza újra. Kezeli az összes SCSS-specifikus szintaxist: a $változókat, a @mixin/@include párost, az @extend-et, az @if/@for/@each vezérlési szerkezeteket, a #{$var} interpolációt és a // egysoros megjegyzéseket. Megőrzi a beágyazott választóstruktúrát, és a beágyazott blokkokat megfelelően behúzza. A Behúzás választóval 2 szóköz, 4 szóköz vagy tabulátor között lehet váltani.
LESS formázás: A LESS-stíluslapokat egységes behúzással formázza újra. Kezeli a LESS-specifikus szintaxist: a @változókat, a paraméteres mixineket, az őröket (when), a @{var} interpolációt, az összevonást és a // egysoros megjegyzéseket. Megőrzi a beágyazott választóstruktúrát, és a beágyazott blokkokat megfelelően behúzza. A Behúzás választóval 2 szóköz, 4 szóköz vagy tabulátor között lehet váltani.
SCSS → CSS: Az SCSS/Sass-stíluslapokat egyszerű CSS-re fordítja a hivatalos Dart Sass fordítóval (v1.102). Támogatja a változókat ($var), a beágyazást, a mixineket (@mixin, @include), a függvényeket, az @extend-et, az @if/@for/@each vezérlési szerkezeteket és a modern Sass-modulokat (@use, @forward). A Sass-fordító (~5,4 MB) az első használatkor töltődik be.
LESS → CSS: A LESS-stíluslapokat egyszerű CSS-re fordítja. Támogatja a változókat (@var), a beágyazást, a mixineket, a paraméteres mixineket, a műveleteket, a függvényeket, az őröket és az importálást (@import). A fordító (~150 KB) az első használatkor töltődik be.
SASS → CSS: A behúzásos SASS-szintaxist (.sass fájlok, kapcsos zárójelek és pontosvesszők nélkül) egyszerű CSS-re fordítja a Dart Sass segítségével. A behúzásos SASS a kapcsos zárójelek helyett a szóközöket használja jelentéshordozóként, ami tömörebbé teszi. Ugyanaz a Dart Sass fordító (~5,4 MB) kezeli az SCSS és a behúzásos SASS szintaxist is.
CSS → SCSS: Szabványos CSS-t SCSS szintaxisra alakít át, automatikus beágyazás-átszervezéssel. BEM-szerű mintákat ismer fel, és a .parent-child választókat &-child beágyazott blokkokba helyezi. A leszármazott-választókat beágyazott szabályokká, a pszeudo-osztály-választókat &:state-ekké alakítja, a megismétlődő egyéni tulajdonságokat pedig SCSS $változókba emeli. Ha a CSS lapos, ismétlődő szerkezetű, ez az eszköz segít tisztább, beágyazott SCSS-sé átszervezni.
CSS → LESS: Szabványos CSS-t LESS szintaxisra alakít át, automatikus beágyazás-átszervezéssel. Ugyanaz a fajta beágyazás, mint a CSS→SCSS esetében: ismétlődő szülőmintákat, leszármazott-választókat és pszeudo-osztályokat ismer fel. A megismétlődő CSS-egyéni tulajdonságokat LESS @változókba emeli. A kimenet tiszta, beágyazott LESS-kód.
Kaszkád, specificitás és miért harcolnak a stílusok

Ha több szabály ugyanazt az elemet célozza, a specificitás dönt: a soron belüli stílusok az azonosítókat, az azonosítók az osztályokat, az osztályok az elemválasztókat győzik le, a forrássorrend pedig a döntetlent. A !important jelölő felülírja ezt a számítást — és a következő felülírást annyival nehezebbé teszi.

A specificitás választónként számítódik, nem a környezetből összegződik — a specifikusabb szabály nyer, bárhol is áll a stíluslapon.