Konwerter SCSS na CSS Online
Kompiluj SCSS/Sass do czystego CSS w Twojej przegladarce. Bez npm, bez Node.js, bez instalacji.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Kompilator SCSS do CSS
Dlaczego warto uzyc tego kompilatora SCSS?
Zero konfiguracji
Bez npm install, bez webpacka, bez Vite. Wklej swoj SCSS i otrzymaj CSS w kilka sekund.
Oficjalny Dart Sass
Uzywa oficjalnego kompilatora Dart Sass (WebAssembly). Pelna kompatybilnosc z nowoczesnym standardem.
Pelna prywatnosc
Wszystko dziala w Twojej przegladarce. Twoj kod nigdy nie jest wysylany na zaden serwer.
Mixiny, zmienne, zagniezdanie
Pelna obsluga: $zmienne, &:selektory, @mixin/@include, @extend i petle.
Jak to działa
Trzy kroki, żadnych komplikacji
Napisz lub wklej kod SCSS
Wklej kod SCSS lub Sass do edytora. Zmienne, zagniezdzone selektory, mixiny, funkcje i selektory nadrzedne (&) sa obslugiwane.
Natychmiastowa kompilacja
Wynikowy czysty CSS pojawia sie automatycznie w prawym panelu. Kompilator dziala lokalnie w Twojej przegladarce.
Skopiuj lub pobierz CSS
Skopiuj wygenerowany CSS do schowka lub pobierz go jako plik .css gotowy do uzycia produkcyjnego.
FAQ
Masz pytania?
Sass ma dwie skladnie. Oryginalna skladnia (rozszerzenie .sass, stworzona w 2006 roku) uzywa wciec zamiast nawiasow klamrowych i srednikow — jest bardziej zwiezla, ale przerywa kompatybilnosc ze standardowym CSS. SCSS (Sassy CSS, rozszerzenie .scss) zostalo wprowadzone w Sass 3.0 w 2010 roku ze skladnia w pelni kompatybilna z CSS: kazdy poprawny CSS jest poprawnym SCSS. SCSS szybko stalo sie de facto standardem i jest tym, czego wiekszosc deweloperow uzywa dzisiaj. To narzedzie obsluguje obie skladnie.
Zmienne SCSS sa definiowane z prefiksem $ i moga przechowywac kolory, rozmiary, czcionki lub dowolna wartosc CSS. Na przyklad: $primary-color: #3498db; $base-font: 'Inter', sans-serif; $spacing: 16px. Sa uzywane bezposrednio we wlasciwosciach: color: $primary-color. W odroznieniu od wlasciwosci niestandardowych CSS (--zmienna), zmienne SCSS sa rozwiazywane w czasie kompilacji i nie istnieja w wynikowym CSS. Do dynamicznego dostepy w srodowisku uruchomieniowym (z JavaScript) odpowiednie sa wlasciwosci niestandardowe CSS.
Spolecznosc SCSS ma niepisana zasade: nie wiecej niz 3-4 poziomy zagniezdania. Glebokie zagniezdanie generuje wysoce specyficzne selektory CSS (.component .block .element .modifier), ktore sa trudne do nadpisania i niepotrzebnie zwiekszaja specyficznosc. Metodologia BEM (Block-Element-Modifier) dobrze wspolpracuje z SCSS, bo ogranicza zagniezdanie do 1-2 poziomow przy zachowaniu przejrzystej struktury. Selektor nadrzedny & jest przydatny do pseudoklas (&:hover, &:focus) i modyfikatorow (& .active) bez semantycznego zwiekszania glebi.
Tak. Mixiny sa jednym z filarow SCSS: definiowane za pomoca @mixin name($params) i wywolywane przez @include name(values). Umozliwiaja ponowne uzywanie blokow CSS z wariantami — czego standardowy CSS osiagnal tylko czesciowo przez wlasciwosci niestandardowe. Narzedzie obsluguje rowniez @extend (dziedziczenie selektorow), @function (funkcje niestandardowe), @each, @for i @while (petle) oraz @if/@else (warunki).
Sa przypadki, w ktorych konfigurowanie srodowiska Node.js jest niepraktyczne: szybka eksploracja SCSS bez tworzenia projektu, praca na maszynie bez uprawnien do instalowania pakietow, przeprowadzanie demonstracji na zywo, przeglad wyjscia CSS konkretnego fragmentu kodu lub po prostu nauka skladni. To narzedzie uzywa oficjalnego kompilatora Dart Sass (aktualnej implementacji referencyjnej od czasu wycofania LibSass w pazdzierniku 2020 roku) skompilowanego do WebAssembly, zapewniajac pelna kompatybilnosc z nowoczesnym standardem SCSS.
LibSass byla implementacja Sass w C/C++ uzywana przez pakiet npm node-sass, ktory przez lata byl najpopularniejszym sposobem kompilowania SCSS w projektach Node.js. Zespol Sass wycofal LibSass w pazdzierniku 2020 roku, poniewaz nie mogl dotrzymac kroku nowym specyfikacjom. Dart Sass — oficjalna implementacja napisana w Dart i opublikowana jako czysty JavaScript dla npm jako pakiet sass — jest od tamtej pory implementacja referencyjna. W przypadku projektow uzywajacych node-sass zalecana jest migracja do pakietu sass; jest to zamiennik drop-in w wiekszosci przypadkow.
SCSS do CSS online: kompiluj Sass bez npm lub Node.js w przegladarce
Sass (Syntactically Awesome Style Sheets) to jezyk preprocesowania CSS stworzony przez Hamptona Catlina i rozwijany glownie przez Natalie Weizenbaum i Chrisa Eppsteina. Pierwsza wersja zostala wydana w listopadzie 2006 roku jako czesc frameworku Haml dla Ruby. Oryginalna skladnia uzywala wciec zamiast nawiasow klamrowych, inspirowana Pythonem i YAML, co czyni ja bardziej zwiezla, ale niekompatybilna z istniejacym CSS. Ta bariera adopcji stala sie katalyzatorem dla stworzenia SCSS (Sassy CSS), wprowadzonego w Sass 3.0 w pazdzierniku 2010 roku: nowej skladni w pelni kompatybilnej z CSS3, gdzie kazdy poprawny plik CSS jest rowniez poprawnym SCSS. Podstawowe funkcje SCSS — zmienne z prefiksem $, zagniezdanie selektorow, selektor nadrzedny & dla pseudoklas i wariantow, dyrektywy @mixin i @include do ponownego uzycia kodu, a @extend do dziedziczenia — rozwiazywaly problemy z utrzymywalnascia czystego CSS na skale, z ktorymi branza borykala sie od lat.
Ekosystem preprocesorow CSS miescial swoj szczyt miedzy 2012 a 2018 rokiem. LESS (stworzony przez Alexisa Selliera w 2009 roku) byl pierwszym powaznym konkurentem Sass, uzywajac @ zamiast $ dla zmiennych i zyskujac masowa adopcje przez Bootstrap 3 (2013). Stylus (stworzony przez TJ Holowaychuka w 2010 roku) oferowala jeszcze bardziej elastyczna skladnie, ale z mniejsza adopcja. SCSS wygral bitwe ekosystemu czesciowo dzieki adopcji w Bootstrap 4 (2018, ktory przenioscil sie z LESS do SCSS), czesciowo dzieki integracji w frameworkach takich jak Compass (Chris Eppstein, 2009) oraz czesciowo bedac standardem w Angular (ktory domyslnie tworzy projekty z SCSS). Implementacje Sass znacznie ewoluowaly: Ruby Sass (2006-2019, oryginalna implementacja, teraz nieobslugiwana), LibSass (implementacja C/C++ uzywana przez node-sass, wycofana w pazdzierniku 2020) i Dart Sass (aktualna implementacja referencyjna, wydana w 2016 roku, dostepna jako pakiet npm sass od 2018).
Potrzeba internetowego kompilatora SCSS pojawia sie w bardzo specyficznych kontekstach przeplywe pracy frontendowego. Najczestszy to szybka eksploracja: deweloper chce przetestowac, jak kompiluje sie konkretny mixin, zweryfikowac, ze funkcja kolorow dziala zgodnie z oczekiwaniami, lub zrozumiec wyjscie CSS konkretnego wzorca zagniezdania bez tworzenia nowego projektu. Convertir.ai uzywa Dart Sass skompilowanego do WebAssembly, ktory dziala w calosi w Twojej przegladarce z szybkoscami porownywalnymi do natywnego kompilatora, bez wysylania jakiegokolwiek wiersza kodu na zewnetrzne serwery. To czyni go bezpiecznym do kompilowania arkuszy stylow z projektow produkcyjnych lub wlasnosci intelektualnej.