Sass na CSS
Kompiluj Sass i SCSS do CSS online. Konwersja w czasie rzeczywistym z rozwiniętym lub skompresowanym wynikiem, numerami linii błędów i pełną obsługą zmiennych, mixinów i zagnieżdżeń.
Jaka jest różnica między Sass a SCSS?
SCSS to nowsza składnia przypominająca CSS, używająca nawiasów klamrowych i średników. Sass (składnia wcięta) używa wcięć i nowych linii. To narzędzie kompiluje oba - wystarczy wybrać składnię z listy.
Które funkcje Sass są obsługiwane?
Kompilator używa oficjalnego silnika Dart Sass, więc zmienne, zagnieżdżenia, mixiny, @include, funkcje, @use, @extend, dyrektywy sterujące jak @if i @each oraz skompresowany styl wyjścia są w pełni obsługiwane.
Jak uzyskać skompresowany CSS?
Przed kompilacją ustaw styl wyjścia na Skompresowany. Białe znaki i końcowy średnik są usuwane, co daje jak najmniejszy arkusz stylów.
Dlaczego błąd pokazuje numer linii?
Gdy kod zawiera błąd składni, silnik Sass zgłasza dokładną linię i kolumnę, w której parseowanie zawiodło, a narzędzie wyświetla to nad wynikiem, aby szybko poprawić.
Czy mój kod Sass jest wysyłany na serwer?
Nie. Pełny silnik Dart Sass jest wbudowany w stronę i kompiluje lokalnie w przeglądarce. Twoje arkusze stylów nigdy nie opuszczają urządzenia — bezpieczne nawet dla prywatnych projektów.
Czy mogę kompilować @import lokalnych plików?
Nie. Kompilator działa na jednym fragmencie w pamięci i nie ma dostępu do twojego systemu plików, więc importy oparte na plikach i @use zewnętrznych partiali nie mogą zostać rozwiązane.
Czy działa offline?
Tak. Po jednorazowym wczytaniu strony i pakietu kompilatora kompilacja odbywa się w całości na twojej maszynie, bez połączenia.
Jak użyć wyniku?
Skopiuj skompilowany CSS do schowka lub pobierz go jako style.css przyciskami pod wynikiem, a następnie podlinkuj w HTML albo wklej do arkusza stylów projektu.
Jak korzystać z Sass na CSS
Ten kompilator uruchamia oficjalny silnik Dart Sass w całości w Twojej przeglądarce. Wklej SCSS lub Sass z wcięciami i natychmiast otrzymasz czysty CSS — zmienne, mixiny, zagnieżdżenia i funkcje obsługiwane, nic nie jest wysyłane.
- Wklej swój Sass lub SCSS w pole wejściowe albo naciśnij Przykład, aby wczytać działające demo ze zmienną i mixinem.
- Wybierz z list rozwijanych składnię (SCSS lub Sass z wcięciami) oraz styl wyjściowy (Expanded lub Compressed).
- Przy włączonej kompilacji na żywo CSS powstaje w trakcie pisania; w przeciwnym razie naciśnij Kompiluj ręcznie.
- Jeśli wystąpi błąd składni, dokładny numer linii i komunikat pojawią się nad wynikiem, dzięki czemu szybko go naprawisz.
- Przyciskami Kopiuj lub Pobierz pod wynikiem zabierz skompilowany arkusz stylów jako style.css.
Wybierz styl wyjściowy Compressed, aby zminifikować arkusz stylów — świetny do buildów produkcyjnych prosto ze źródła.
Powiązane narzędzia
- Upiększacz CSS Formatuj i upiększaj kod CSS natychmiast. Konwertuj zminifikowany CSS na czytelny kod z konfigurowalnymi opcjami.
- Minifikator CSS Darmowy minifikator CSS online. Natychmiast kompresuj i optymalizuj kod CSS, usuwając białe znaki, komentarze i niepotrzebne znaki. Zmniejsz rozmiar pliku dla szybszej wydajności sieci.
- Generator gradientów CSS Twórz oszałamiające gradienty CSS wizualnie. Generuj gradienty liniowe, radialne i stożkowe z wieloma punktami kolorów, kątami i pozycjami. Natychmiast kopiuj gotowy do produkcji kod CSS.
- Generator CSS Flexbox Wizualny generator CSS Flexbox z podglądem na żywo. Dostosuj właściwości flex i uzyskaj gotowy kod CSS.
- Kalkulator Chmod Darmowy kalkulator chmod online do wizualizacji i obliczania uprawnień plików Linux za pomocą pól wyboru. Natychmiastowa konwersja między notacją liczbową (755, 644) a symboliczną (rwxr-xr-x). Obsługuje specjalne uprawnienia jak setuid, setgid, sticky bit.
- Tabela ASCII Kompletna referencja kodowania znaków ASCII z kodami dziesiętnymi, szesnastkowymi, ósemkowymi, binarnymi, encjami HTML i opisami znaków. Natychmiastowe wyszukiwanie i filtrowanie.
- Tester Żądań HTTP Testuj API REST bezpośrednio w przeglądarce. Wysyłaj żądania GET, POST, PUT, DELETE z niestandardowymi nagłówkami, ciałem i parametrami. Natychmiast widz status, nagłówki i ciało JSON odpowiedzi.
- Generator .htaccess Generuj reguły .htaccess Apache dla przekierowań, przepisań, nagłówków bezpieczeństwa, buforowania i więcej.