Sass (Indented) in CSS konvertieren Online
Eingerückte Sass-Syntax (.sass) in reines CSS kompilieren. Kostenlos, im Browser, ohne Ruby, Dart oder Node.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Anwendungsfälle
Eingerücktes Sass zu CSS ohne Installation
Ruby-Sass-Altprojekte
Kompiliere .sass-Dateien aus älteren Projekten, die Ruby Sass verwendeten, ohne es installieren zu müssen.
Keine Abhängigkeiten
Kein Ruby, Dart, Node.js oder npm nötig. Funktioniert direkt im Browser.
Sass lernen
Probiere die originale eingerückte Sass-Syntax aus und sieh das generierte CSS sofort.
100 % privat
Dein Sass-Code wird nie an einen Server gesendet. Die Kompilierung findet in deinem Browser statt.
So funktioniert es
Drei Schritte, kein Aufwand
Deine .sass-Datei einfügen oder hochladen
Ziehe deine .sass-Datei hinein oder füge Code mit eingerückter Syntax ein (keine geschweiften Klammern oder Semikolons). .scss-Dateien werden nicht akzeptiert.
Sofortige Kompilierung
Der Sass-Compiler verarbeitet deinen Code im Browser und erzeugt sofort gültiges CSS. Syntaxfehler werden mit Zeilennummern angezeigt.
CSS kopieren oder herunterladen
Kopiere das fertige CSS in die Zwischenablage oder lade es als .css-Datei herunter, die direkt in jedem Webprojekt verwendbar ist.
FAQ
Noch Fragen?
Es handelt sich um zwei verschiedene Syntaxen desselben Sass-Präprozessors. Die .sass-Syntax (auch 'eingerückte Syntax' oder 'Original-Sass' genannt) wurde 2006 von Hampton Catlin entwickelt und verwendet Einrückungen zur Definition der Regel-Hierarchie, ohne geschweifte Klammern ({}) oder Semikolons (;), ähnlich der Python- oder CoffeeScript-Syntax. Die .scss-Syntax (Sassy CSS) wurde im Mai 2010 in Sass 3 eingeführt und verwendet die gleiche Struktur aus geschweiften Klammern und Semikolons wie Standard-CSS, was die Kompatibilität mit vorhandenem CSS gewährleistet. Dieses Tool kompiliert ausschließlich die eingerückte .sass-Syntax. Für .scss verwende das scss-to-css-Tool.
Hampton Catlin entwarf Sass 2006, beeinflusst von seiner Erfahrung mit Haml (einem anderen von ihm entwickelten Präprozessor zur Vereinfachung von HTML). Die Philosophie war, dass Style-Code sauberer und weniger ausführlich als CSS sein sollte: Das Entfernen von geschweiften Klammern und Semikolons reduzierte visuelles Rauschen und erzwang konsistente Einrückung, was die Lesbarkeit verbesserte. Die erste Sass-Implementierung war in Ruby, als Teil des Haml-Frameworks für Ruby on Rails.
Die .sass-Syntax unterstützt alle Sass-Funktionen: Variablen ($color: #333), Selektor-Verschachtelung, Mixins (@mixin und @include), Vererbung mit @extend, Funktionen mit @function, mathematische Operationen, Importe mit @use und @forward (das moderne Modulsystem von Dart Sass, eingeführt in Dart Sass 1.23 im Oktober 2019 als Ersatz für @import), Kontrollfluss-Direktiven (@if, @each, @for, @while), Interpolation mit #{} und der übergeordnete Selektor-Operator &. Der einzige Unterschied zu .scss ist syntaktischer Natur: Einrückung statt Klammern und keine Semikolons.
Es gibt mehrere Szenarien, in denen du keinen Sass-Compiler in deiner Umgebung installieren kannst oder möchtest: beim Arbeiten auf einem gemeinsam genutzten Computer oder ohne Installationsrechte, in eingeschränkten CI/CD-Umgebungen, beim schnellen Bearbeiten einer .sass-Datei aus einem älteren Projekt, das Ruby Sass verwendete (das am 26. März 2019 das End-of-Life erreichte), beim Erlernen von Sass ohne Einrichten einer vollständigen Entwicklungsumgebung oder wenn du schnell das von einem bestimmten Sass-Snippet generierte CSS überprüfen möchtest. Convertir.ai führt einen zu WebAssembly kompilierten Sass-Compiler direkt in deinem Browser aus, ohne Server-Abhängigkeiten.
Das Tool kompiliert die eingerückte Syntax (.sass), die mit Dart Sass kompatibel ist (der offiziellen Referenzimplementierung seit 2019, als Ruby Sass am 26. März 2019 sein End-of-Life erreichte und LibSass im Oktober 2020 als veraltet eingestuft wurde). Der überwiegende Teil des für Ruby Sass geschriebenen .sass-Codes ist mit Dart Sass kompatibel, mit Ausnahme des Modulsystems: @import wurde in Dart Sass als veraltet markiert und durch @use und @forward ersetzt. Wenn dein .sass-Code @import intensiv verwendet, enthält das resultierende CSS möglicherweise Deprecation-Warnungen, aber die Kompilierung funktioniert weiterhin.
Die eingerückte Syntax hat Befürworter, die argumentieren, dass sie saubereren und besser lesbaren Code produziert: Das Fehlen von geschweiften Klammern und Semikolons reduziert die Zeichenanzahl, erzwungene Einrückung verbessert die Codekonsistenz, und die Syntax ähnelt modernen Sprachen wie Python, CoffeeScript oder Pug. Allerdings ist die Akzeptanz von .scss in der Branche überwältigend dominant: Moderne CSS-Frameworks (Bootstrap 5, Foundation, Tailwind mit seiner Sass-Schicht) verwenden .scss, typische Entwicklungsumgebungen (webpack, Vite, Parcel) konfigurieren sass-loader oder das Vite-Plugin standardmäßig für .scss, und die meisten Entwickler sind mit der CSS-Klammern-Syntax vertrauter. Für neue Projekte ist .scss in der Regel die pragmatischere Wahl wegen der besseren Tooling-Verfügbarkeit und IDE-Unterstützung.
Sass zu CSS kompilieren: eingerückte .sass-Syntax, Ruby-Sass-Erbe und .sass vs. .scss
Sass (Syntactically Awesome Style Sheets) wurde 2006 von Hampton Catlin entwickelt, mit der ersten Implementierung von Nathan Weizenbaum in Ruby. Die ursprüngliche Sass-Syntax, bekannt als 'eingerückte Syntax' oder einfach 'Sass' (mit der .sass-Erweiterung), ist von der Philosophie von Haml inspiriert – einem anderen von Catlin erstellten Präprozessor, um HTML in Ruby-on-Rails-Anwendungen zu vereinfachen. Die eingerückte Syntax eliminiert zwei Elemente von CSS, die Catlin als unnötiges visuelles Rauschen betrachtete: die geschweiften Klammern ({}), die Deklarationsblöcke begrenzen, und die Semikolons (;), die einzelne Deklarationen trennen. Stattdessen wird die Hierarchie durch Einrückung definiert, ähnlich wie in Python, CoffeeScript oder modernen Versionen von Pug (früher Jade). Diese Designentscheidung macht .sass-Code deutlich kompakter. Die erste öffentliche Version von Sass wurde im November 2006 als Teil des Haml-Frameworks für Ruby on Rails veröffentlicht, und in den ersten Jahren seiner Existenz erforderte das Kompilieren von Sass eine installierte Ruby-Version.
Im Mai 2010 führte Sass 3 die SCSS-Syntax (Sassy CSS, mit der .scss-Erweiterung) ein, die als Obermenge von CSS konzipiert war: Jede gültige CSS-Datei ist auch eine gültige SCSS-Datei. Diese strategische Entscheidung beschleunigte die Sass-Akzeptanz in der Branche erheblich, da Entwickler bestehende CSS-Projekte auf SCSS migrieren konnten, indem sie einfach die Datei umbenannten. Bootstrap übernahm Sass (in der SCSS-Variante) in Bootstrap 3.0 im August 2013, was SCSS als De-facto-Standard für CSS-Präprozessoren festigte. Dart Sass, die aktuelle Referenzimplementierung von Sass, wurde von Natalie Weizenbaum und dem Google-Team im November 2016 als primäre Implementierung gestartet. Ruby Sass erreichte sein End-of-Life am 26. März 2019, und LibSass (die C++-Implementierung, schneller, verwendet von node-sass) wurde offiziell im Oktober 2020 als veraltet eingestuft. Seitdem ist Dart Sass die einzige aktiv gepflegte Implementierung und unterstützt vollständig die eingerückte .sass-Syntax zusätzlich zu SCSS.
Der Bedarf, .sass-Syntax ohne Ruby, Dart oder Node zu kompilieren, entsteht in mehreren praktischen Kontexten. Am häufigsten ist die Pflege von Altprojekten: Tausende von Webprojekten, die zwischen 2006 und 2014 entwickelt wurden, verwenden .sass-Syntax mit Ruby Sass, und wenn ein Entwickler die Stile eines dieser Projekte ändern muss, ohne die ursprüngliche Entwicklungsumgebung einzurichten (die eine bestimmte Ruby-Version, das Sass-Gem in einer bestimmten Version und möglicherweise Bundler mit einem bestimmten Gemfile erfordern kann), ist ein Online-Compiler die schnellste Lösung. Ein weiterer Kontext ist Bildung: Die eingerückte Sass-Syntax wird häufig in Webentwicklungskursen als Beispiel für CSS-Präprozessoren gelehrt, da sie das Konzept der Selektor-Verschachtelung und Vererbung klar veranschaulicht. Das Konvertieren von .sass nach CSS ist auch der erste Schritt für die Migration von Projekten mit eingerückter Syntax zu SCSS oder zu modernen Lösungen auf Basis von PostCSS, nativen CSS-Custom-Properties (unterstützt in allen modernen Browsern seit 2017) oder CSS Nesting (implementiert in Chrome 112, Firefox 117 und Safari 16.5).