Formatter SCSS
Formatuj arkusze stylów Sass SCSS za pomocą tego formatowania SCSS. Wklej SCSS, a narzędzie uporządkuje zagnieżdżone reguły, zmienne, mixiny, dołączenia, selektory nadrzędne i dyrektywy sterujące, stosując wcięcia o szerokości dwóch spacji, jedną deklarację w wierszu, spację po dwukropkach właściwości oraz brakujące średniki. Interpolacje i komentarze są zachowywane, dzięki czemu programiści front-endu mogą uporządkować pliki częściowe i fragmenty kodu bez ich kompilowania.
Najczęściej zadawane pytania
Jak działa formatter SCSS?
Odczytuje arkusz stylów jako tokeny, takie jak klamry, średniki, dwukropki, ciągi znaków i komentarze, a następnie na ich podstawie odtwarza układ. Każda klamra otwierająca rozpoczyna blok z wcięciem, a każda deklaracja kończy się w osobnym wierszu.
Czy obsługiwane jest zagnieżdżanie?
Tak, zagnieżdżone reguły i selektory nadrzędne, takie jak &:hover, otrzymują wcięcie o jeden poziom głębsze niż ich element nadrzędny, czyli dwie spacje na poziom. Dwukropki selektora pozostają przy nim, więc &:hover nie jest rozdzielane.
Jak formatowane są zmienne, mixiny i dołączenia?
Zmienne, takie jak $color: #333;, otrzymują spację po dwukropku, a @mixin i @include zachowują argumenty ze spacją po każdym przecinku. Dyrektywy sterujące, takie jak @if, @each i @for, otrzymują spację przed nawiasem.
Czy interpolacje są zachowywane?
Tak, interpolacje, takie jak #{$name}, są kopiowane dokładnie w niezmienionej postaci. Dotyczy to interpolacji wewnątrz selektorów, takich jak .icon-#{$name}, oraz wewnątrz nazw właściwości.
Czy narzędzie kompiluje lub sprawdza poprawność mojego SCSS?
Nie, narzędzie nie kompiluje do CSS ani nie sprawdza składni, więc formatuje również niekompletne fragmenty. Użyj kompilatora Sass, aby znaleźć błędy i wygenerować CSS.
Czy komentarze są zachowywane?
Tak. Komentarze w wierszu rozpoczynające się od // kończą się wraz z wierszem, a komentarze blokowe pozostają na swoich miejscach.
Czy działa ze składnią Sass z wcięciami?
Nie, narzędzie jest przeznaczone dla SCSS, który używa klamer i średników. Pliki w składni .sass z wcięciami nie zawierają klamer, które można by wykorzystać do określenia wcięć, więc najpierw przekonwertuj je do SCSS.
Czy mogę zmienić wcięcia?
Nie, wynik zawsze używa dwóch spacji, a formatter nie ma opcji. Dlatego ten sam arkusz stylów zawsze daje taki sam wynik.
Dlaczego wynik jest otoczony znacznikami kodu scss?
Wynik jest zwracany jako blok kodu Markdown oznaczony jako scss, dzięki czemu jest wyświetlany z podświetlaniem składni. Skopiuj wiersze między znacznikami bloku do swojego pliku .scss.
Jak duży może być mój arkusz stylów?
Do 5 MB na jedno uruchomienie; większe dane wejściowe są odrzucane z komunikatem. Wynik jest identyczny z opcją SCSS w formatowaniu kodu.