Kompilator SCSS do CSS — Bezpłatny Online
Kompiluj SCSS lub SASS do CSS gotowego dla przeglądarki natychmiast. Bezpłatny, działa w przeglądarce.
Wejściowy SCSS
Skompilowany CSS
Przykłady SCSS do CSS
Zmienne i zagnieżdżanie SCSS są kompilowane do standardowego CSS. Przykład:
Zmienne i zagnieżdżone selektory
Wejściowy SCSS:
Skompilowany CSS:
Użyj przycisku Przykład powyżej, aby załadować więcej przykładowych danych.
Czym jest SCSS do CSS?
SCSS to preprocesor CSS dodający zmienne, zagnieżdżanie, mixiny i funkcje. Przeglądarki nie uruchamiają SCSS — wymagają standardowego CSS. To narzędzie kompiluje Twój SCSS do CSS gotowego dla przeglądarki. Dokumentacja Sass definiuje składnię.
Kompilacja działa całkowicie w Twojej przeglądarce. Nic nie jest wysyłane na serwer. Wynik to standardowy CSS. W odwrotnym kierunku (CSS do SCSS) użyj CSS do SCSS. Dla Less użyj Less do CSS.
Jak używać tego narzędzia
Wklej lub wczytaj SCSS
Skopiuj swój SCSS lub SASS i wklej go do lewego edytora. Możesz też kliknąć Wczytaj, aby załadować plik .scss lub .sass. Przycisk Przykład ładuje przykładowe dane. Nieprawidłowy SCSS pokaże błąd.
Wyświetl skompilowany CSS
Prawy panel pokazuje skompilowany CSS. Zmienne są rozwiązywane, zagnieżdżanie jest spłaszczane, a mixiny są rozwijane. Wynik to standardowy CSS używalny przez każdą przeglądarkę.
Kopiuj lub pobierz
Użyj Kopiuj lub Pobierz. Aby sformatować wynik użyj Formatera CSS. Aby zminifikować użyj Minifikatora CSS.
Kiedy SCSS do CSS jest przydatny
Gdy masz SCSS z projektu, systemu projektowania lub starszej bazy kodu, ale potrzebujesz standardowego CSS — do szybkiego testowania, szablonów email lub systemów bez narzędzi do budowania — ta kompilacja pomaga. Frameworki takie jak Bootstrap i Foundation używają SCSS. Do produkcyjnych buildów Dart Sass i webpack kompilują SCSS. Przydatne też do debugowania: widzisz dokładnie jaki CSS produkuje Twój SCSS.
Wiele frameworków (Bootstrap, Foundation) używa SCSS. Jeśli dostosowujesz zmienne lub wyodrębniasz style, kompilacja tutaj daje Ci końcowy CSS. Aby przekonwertować istniejący CSS do struktury SCSS użyj CSS do SCSS.
Często zadawane pytania
Różnica między SCSS a SASS?
SCSS używa nawiasów klamrowych jak CSS. SASS używa wcięć (bez nawiasów). Oba kompilują do tego samego CSS. To narzędzie obsługuje obie składnie.
Czy obsługuje @import?
Częściowe importy mogą nie być rozwiązane, jeśli pliki nie są załadowane. Dla projektów wieloplikowych użyj narzędzi do budowania takich jak Dart Sass lub bundlera. Zobacz CLI Sass.
Czy moje dane są prywatne?
Tak. Kompilacja działa całkowicie w Twojej przeglądarce. Żadne dane nie są wysyłane na żaden serwer.
Jak obsługiwane są mixiny i funkcje?
Mixiny i funkcje są rozwijane podczas kompilacji. Wyjściowy CSS zawiera rozwiązane wartości. Złożone funkcje są obsługiwane w granicach możliwości kompilatora.
Czy mogę używać z Bootstrap?
SCSS Bootstrap ma wiele plików częściowych i zmiennych. Do pełnej kompilacji Bootstrap użyj oficjalnego buildu lub npm. To narzędzie działa dla SCSS z pojedynczego pliku lub fragmentów kodu.
Powiązane narzędzia
Sass/SCSS: sass-lang.com i dokumentacja Sass. MDN CSS i W3C CSS definiują format wyjściowy.