Narzędzia CSS

Zestaw narzędzi CSS w jednym: formatowanie/upiększanie, minifikacja/kompaktowanie, walidacja składni, kompilacja SCSS/Sass i LESS do CSS oraz odwrotna konwersja CSS z powrotem do SCSS lub LESS.
Całe przetwarzanie odbywa się lokalnie w przeglądarce — Dane nigdy nie są wysyłane na żaden serwer.
Tryb:
Wejściowy CSS / SCSS / LESS / SASS
Wynik
Jak używać: wklej swój CSS/SCSS/LESS/SASS w lewe pole, wybierz tryb i kliknij Przetwórz (albo po prostu pisz — przetwarzanie uruchamia się automatycznie).
Jak działa każdy tryb
Formatowanie CSS: formatuje CSS ze spójnymi wcięciami (2/4 spacje lub tabulatory), jedna właściwość w wierszu. Obsługuje zagnieżdżone reguły at, np. @media, @keyframes, @supports. Zachowuje komentarze (zarówno /* */, jak i jednowierszowe). Zmień selektor Wcięcie, aby przełączać między 2 spacjami, 4 spacjami lub tabulatorami.
Minifikacja: usuwa zbędne białe znaki, komentarze i nadmiarowe znaki, dając najbardziej zwarty CSS. Idealne do wdrożeń produkcyjnych, aby zmniejszyć rozmiar pliku i transfer. Pasek statystyk pokazuje współczynnik kompresji.
Walidacja: analizuje CSS i sprawdza błędy składni. Zgłasza błędy analizy z dokładnym numerem wiersza i kolumny. Pokazuje też statystyki: liczbę reguł, selektorów, deklaracji i reguł at.
Formatowanie SCSS: formatuje arkusze SCSS/Sass ze spójnymi wcięciami. Obsługuje całą specyficzną dla SCSS składnię: $zmienne, @mixin/@include, @extend, sterowanie przepływem @if/@for/@each, interpolację #{$var} i jednowierszowe komentarze //. Zachowuje strukturę zagnieżdżonych selektorów i poprawnie wcina zagnieżdżone bloki. Zmień selektor Wcięcie, aby przełączać między 2 spacjami, 4 spacjami lub tabulatorami.
Formatowanie LESS: formatuje arkusze LESS ze spójnymi wcięciami. Obsługuje całą specyficzną dla LESS składnię: @zmienne, miksyny parametryczne, strażników (when), interpolację @{var}, scalanie i jednowierszowe komentarze //. Zachowuje strukturę zagnieżdżonych selektorów i poprawnie wcina zagnieżdżone bloki. Zmień selektor Wcięcie, aby przełączać między 2 spacjami, 4 spacjami lub tabulatorami.
SCSS → CSS: kompiluje arkusze SCSS/Sass do zwykłego CSS za pomocą oficjalnego kompilatora Dart Sass (v1.102). Obsługuje zmienne ($var), zagnieżdżanie, miksyny (@mixin, @include), funkcje, @extend, sterowanie przepływem @if/@for/@each oraz nowoczesne moduły Sass (@use, @forward). Kompilator Sass (~5,4 MB) ładuje się leniwie przy pierwszym użyciu tego trybu.
LESS → CSS: kompiluje arkusze LESS do zwykłego CSS. Obsługuje zmienne (@var), zagnieżdżanie, miksyny, miksyny parametryczne, operacje, funkcje, strażników i importowanie (@import). Kompilator (~150 KB) ładuje się leniwie przy pierwszym użyciu tego trybu.
SASS → CSS: kompiluje składnię wcięciową SASS (pliki .sass, bez klamer i średników) do zwykłego CSS za pomocą Dart Sass. Składnia wcięciowa SASS używa znaczących białych znaków zamiast klamer, przez co jest zwięźlejsza. Ten sam kompilator Dart Sass (~5,4 MB) obsługuje zarówno składnię SCSS, jak i wcięciową SASS.
CSS → SCSS: konwertuje standardowy CSS na składnię SCSS z automatycznym przekształceniem zagnieżdżeń. Wykrywa wzorce podobne do BEM i przenosi selektory .rodzic-dziecko do zagnieżdżonych bloków &-dziecko. Zamienia selektory potomne na zagnieżdżone reguły, selektory pseudoklas na &:stan, a powtarzające się własne właściwości CSS na $zmienne SCSS. Jeśli CSS ma płaską, powtarzalną strukturę, to narzędzie pomoże przekształcić go w czystszy zagnieżdżony SCSS.
CSS → LESS: konwertuje standardowy CSS na składnię LESS z automatycznym przekształceniem zagnieżdżeń. Ten sam rodzaj zagnieżdżania co CSS→SCSS: wykrywa powtarzające się wzorce rodzica, selektory potomne i pseudoklasy. Wyodrębnia powtarzające się własne właściwości CSS do @zmiennych LESS. Wynik to czysty, zagnieżdżony kod LESS.
Kaskada, specyficzność i dlaczego style się ścierają

Gdy kilka reguł celuje w ten sam element, decyduje specyficzność: style inline biją identyfikatory, identyfikatory biją klasy, klasy biją selektory elementów, a kolejność w źródle rozstrzyga remisy. Flaga !important nadpisuje ten rachunek — i sprawia, że następne nadpisanie jest jeszcze trudniejsze.

Specyficzność jest liczona dla każdego selektora osobno, a nie sumowana z kontekstu — bardziej szczegółowa reguła wygrywa niezależnie od tego, gdzie w arkuszu się znajduje.