Beautifier SCSS - sformatuj SCSS w przeglądarce
SCSS to CSS z zagnieżdżaniem, zmiennymi (`$var`), mixinami (`@mixin`), funkcjami i kontrolą przepływu. Beautifier używa Prettiera z parserem scss (ten sam, co dla CSS, ale z włączonymi rozszerzeniami SCSS-a).
Pielęgnuje zagnieżdżanie - każdy `&:hover`, `&::before`, `@include` zostaje sformatowany z odpowiednim wcięciem. Zmienne (`$primary: #0070f3;`) i `@import`/`@use` na górze pliku zostają tak, jak je masz.
Akceptuje `.scss`. Dla starszego stylu Sass z wcięciami zamiast nawiasów (`.sass`) - Prettier nie obsługuje tego formatu (jest deprecated). Tam użyj `sass-convert` lokalnie.
Jak to działa
- Wybierz tryb (Grzeczny / Agresywny / Tylko wcięcia) lub zostaw domyślny.
- Wklej kod w lewy panel albo użyj "Wczytaj plik".
- Dostosuj ustawienia (koło zębate): wcięcie, szerokość, cudzysłowy, średniki.
- Kliknij Sformatuj - pierwszy raz potrwa chwilę (libki ładują się leniwie).
- Po prawej dostajesz wynik z syntax highlightingiem - kopiuj, pobierz albo otwórz w nowej karcie.
Kiedy się przydaje
Pięć sytuacji dla SCSS:
- Bootstrap / Bulma fork. Przejmujesz design system z 2018 - całość w SCSS-ie, ujednolicasz format.
- Tailwind-but-actually-SCSS. Niektóre projekty mają własne mixiny → beautify utility-like helperów.
- Mieszanka SCSS / CSS. Po migracji z czystego CSS-a do SCSS-a - reformat całego folderu.
- Theme files. Variables + mixin pakiety dla dark/light theme - beautify dla spójności.
- Refactor po Find & Replace. Po zmianie nazw zmiennych zostały rozjechane wcięcia.
Pytania i odpowiedzi
Nie. Prettier zachowuje to, co masz. `@import` jest deprecated w SCSS-ie od 1.80+, ale beautifier go nie zmienia. Migracja na `@use`/`@forward` to zadanie dla `stylelint` z `stylelint-scss` regułami.