Konwerter Sass (Indented) na CSS Online
Kompiluj wcięciową składnię Sass (.sass) do czystego CSS. Bezpłatnie, w przeglądarce, bez potrzeby instalowania Ruby, Dart ani Node.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Przypadki użycia
Wcięciowy Sass do CSS bez instalowania czegokolwiek
Spuścizna Ruby Sass
Kompiluj pliki .sass z projektów legacy, które używały Ruby Sass, bez potrzeby jego instalowania.
Bez zależności
Nie potrzebujesz Ruby, Dart, Node.js ani npm. Działa bezpośrednio w przeglądarce.
Nauka Sass
Wypróbuj oryginalną wcięciową składnię Sass i natychmiast zobacz wygenerowany CSS.
100% prywatne
Twój kod Sass nigdy nie jest wysyłany na żaden serwer. Kompilacja odbywa się w Twojej przeglądarce.
Jak to działa
Trzy kroki, żadnych komplikacji
Wklej lub prześlij plik .sass
Przeciągnij plik .sass lub wklej kod z wcięciową składnią (bez nawiasów klamrowych ani średników). Pliki .scss nie są akceptowane.
Natychmiastowa kompilacja
Kompilator Sass przetwarza Twój kod w przeglądarce i natychmiast generuje prawidłowy CSS. Błędy składniowe są wyświetlane z numerami linii.
Skopiuj lub pobierz plik CSS
Skopiuj wynikowy CSS do schowka lub pobierz go jako plik .css gotowy do użycia w dowolnym projekcie webowym.
FAQ
Masz pytania?
Są to dwie różne składnie tego samego preprocesora Sass. Składnia .sass (zwana też 'składnią wcięciową' lub 'oryginalnym Sass') została stworzona przez Hamptona Catlina w 2006 roku i używa wcięcia do definiowania hierarchii reguł, bez nawiasów klamrowych ({}) ani średników (;), podobnie jak składnia Pythona czy CoffeeScript. Składnia .scss (Sassy CSS) została wprowadzona w Sass 3 w maju 2010 roku i używa tej samej struktury nawiasów klamrowych i średników co standardowy CSS, dzięki czemu jest zgodna z istniejącym CSS i łatwiejsza do przyjęcia przez programistów znających CSS. To narzędzie kompiluje wyłącznie wcięciową składnię .sass. Do plików .scss używaj narzędzia scss-to-css.
Hampton Catlin zaprojektował Sass w 2006 roku, pracując jako programista webowy, pod wpływem swoich doświadczeń z Haml (innym preprocesorem, który stworzył w celu uproszczenia HTML). Filozofia była taka, że kod stylów powinien być czystszy i mniej obszerny niż CSS: usunięcie nawiasów klamrowych i średników redukowało wizualny szum i wymuszało spójne wcięcia, poprawiające czytelność. Pierwsza implementacja Sass była napisana w Ruby jako część frameworka Haml dla Ruby on Rails. Przez kilka lat Sass był synonimem składni wcięciowej i wymagał zainstalowanego Ruby do kompilacji.
Składnia .sass obsługuje wszystkie funkcje Sass: zmienne ($color: #333), zagnieżdżanie selektorów, mixiny (@mixin i @include), dziedziczenie z @extend, funkcje z @function, operacje matematyczne, importy z @use i @forward (nowoczesny system modułów Dart Sass, wprowadzony w Dart Sass 1.23 w październiku 2019 roku jako zamiennik @import), dyrektywy przepływu sterowania (@if, @each, @for, @while), interpolacja z #{} oraz operator selektora nadrzędnego &. Jedyna różnica od .scss jest syntaktyczna: wcięcia zamiast nawiasów klamrowych i brak średników.
Istnieje kilka scenariuszy, w których nie chcesz lub nie możesz zainstalować kompilatora Sass w swoim środowisku: podczas pracy na współdzielonym komputerze lub bez uprawnień do instalacji, w ograniczonych środowiskach CI/CD, podczas szybkiej edycji pliku .sass odziedziczonego z projektu legacy, który używał Ruby Sass (który osiągnął koniec życia 26 marca 2019 roku), podczas nauki Sass bez konfigurowania pełnego środowiska programistycznego lub gdy potrzebujesz szybkiego sprawdzenia CSS wygenerowanego przez konkretny fragment kodu Sass. Convertir.ai uruchamia kompilator Sass skompilowany do WebAssembly bezpośrednio w Twojej przeglądarce, bez żadnych zależności serwerowych.
Narzędzie kompiluje składnię wcięciową (.sass) zgodną z Dart Sass (oficjalną implementacją referencyjną od 2019 roku, gdy Ruby Sass osiągnął koniec życia 26 marca 2019 roku, a LibSass został zdeprecjonowany w październiku 2020 roku). Zdecydowana większość kodu .sass napisanego dla Ruby Sass jest zgodna z Dart Sass, z wyjątkiem systemu modułów: @import został zdeprecjonowany w Dart Sass i zastąpiony przez @use i @forward. Jeśli Twój kod .sass intensywnie używa @import, wynikowy CSS może zawierać ostrzeżenia o deprecacji, ale kompilacja nadal będzie działać.
Składnia wcięciowa ma zwolenników, którzy twierdzą, że producuje czystszy i bardziej czytelny kod: brak nawiasów klamrowych i średników zmniejsza liczbę znaków, wymuszone wcięcia poprawiają spójność kodu, a składnia jest bardziej podobna do nowoczesnych języków jak Python, CoffeeScript czy Pug. Jednak adopcja .scss jest w branży przytłaczająco dominująca: nowoczesne frameworki CSS (Bootstrap 5, Foundation, Tailwind z jego warstwą Sass) używają .scss, typowe środowiska programistyczne (webpack, Vite, Parcel) domyślnie konfigurują sass-loader lub wtyczkę Vite dla .scss, a większość programistów lepiej zna składnię nawiasów klamrowych CSS. W nowych projektach .scss jest zazwyczaj bardziej pragmatycznym wyborem ze względu na większą dostępność narzędzi, snippetów i wsparcia IDE.
Kompiluj Sass do CSS: wcięciowa składnia .sass, dziedzictwo Ruby Sass i różnice między .sass a .scss
Sass (Syntactically Awesome Style Sheets) został stworzony przez Hamptona Catlina w 2006 roku, a pierwsza implementacja została napisana przez Nathana Weizenbaumam w Ruby. Oryginalna składnia Sass, znana jako 'składnia wcięciowa' lub po prostu 'Sass' (z rozszerzeniem .sass), jest inspirowana filozofią Haml — innego preprocesora stworzonego przez Catlina w celu uproszczenia HTML w aplikacjach Ruby on Rails. Składnia wcięciowa eliminuje dwa elementy CSS, które Catlin uznał za zbędny wizualny szum: nawiasy klamrowe ({}) ograniczające bloki deklaracji i średniki (;) oddzielające poszczególne deklaracje. Zamiast tego hierarchia jest definiowana przez wcięcia, podobnie jak w Pythonie, CoffeeScript lub nowoczesnych wersjach Pug (dawniej Jade). Ta decyzja projektowa sprawia, że kod .sass jest znacznie bardziej zwarty: blok CSS wymagający 6 znaków składniowych (nawias otwierający, nowa linia, średnik, nowa linia, nawias zamykający) redukuje się do samych wcięć. Pierwsza publiczna wersja Sass została wydana w listopadzie 2006 roku jako część frameworka Haml dla Ruby on Rails i przez pierwsze lata kompilacja Sass wymagała zainstalowanego Ruby.
W maju 2010 roku Sass 3 wprowadził składnię SCSS (Sassy CSS, z rozszerzeniem .scss), zaprojektowaną jako nadzbiór CSS: każdy prawidłowy plik CSS jest również prawidłowym plikiem SCSS. Ta strategiczna decyzja masowo przyspieszyła adopcję Sass w branży, ponieważ programiści mogli migrować istniejące projekty CSS do SCSS przez zwykłe zmianę nazwy pliku. Bootstrap przyjął Sass (w wariancie SCSS) w Bootstrap 3.0 w sierpniu 2013 roku, co utrwaliło SCSS jako de facto standard dla preprocesorów CSS. Dart Sass, obecna implementacja referencyjna Sass, została uruchomiona przez Natalie Weizenbaum (która opracowała też oryginalną implementację Ruby) i zespół Google jako główna implementacja w listopadzie 2016 roku. Ruby Sass osiągnął koniec życia 26 marca 2019 roku, a LibSass (implementacja w C++, szybsza, używana przez node-sass) została oficjalnie zdeprecjonowana w październiku 2020 roku. Od tego czasu Dart Sass jest jedyną aktywnie utrzymywaną implementacją. Dart Sass w pełni obsługuje wcięciową składnię .sass, oprócz SCSS.
Potrzeba kompilacji składni .sass bez instalowania Ruby, Dart ani Node pojawia się w kilku praktycznych kontekstach. Najczęstszym jest utrzymywanie projektów legacy: tysiące projektów webowych opracowanych między 2006 a 2014 rokiem używa składni .sass z Ruby Sass, a gdy programista musi zmodyfikować style jednego z tych projektów bez konfigurowania oryginalnego środowiska programistycznego (które może wymagać konkretnej wersji Ruby, gemu Sass w określonej wersji i potencjalnie Bundlera z konkretnym Gemfile), dostępność kompilatora online jest najszybszym rozwiązaniem. Innym kontekstem jest edukacja: wcięciowa składnia Sass jest często nauczana na kursach programowania webowego jako przykład preprocesorów CSS, ponieważ wyraźnie ilustruje koncepcję zagnieżdżania i dziedziczenia selektorów; studenci uczący się Sass w ograniczonym środowisku edukacyjnym (Chromebook, laboratorium komputerowe, środowisko sandboxed) nie mogą instalować lokalnych kompilatorów. Wreszcie konwersja .sass do CSS jest pierwszym krokiem migracji projektów używających składni wcięciowej do SCSS lub nowoczesnych rozwiązań opartych na PostCSS, niestandardowych właściwościach CSS (natywne zmienne CSS, obsługiwane we wszystkich nowoczesnych przeglądarkach od 2017 roku) lub zagnieżdżaniu CSS (specyfikacja CSS Nesting, zaimplementowana w Chrome 112, Firefox 117 i Safari 16.5, która sprawia, że większość funkcjonalności zagnieżdżania Sass jest przestarzała dla projektów potrzebujących tylko obsługi bieżących przeglądarek).