SCSS in CSS konvertieren Online
SCSS/Sass direkt im Browser in einfaches CSS kompilieren. Kein npm, kein Node.js, keine Installation.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}SCSS-zu-CSS-Compiler
Warum diesen SCSS-Compiler verwenden?
Keine Konfiguration noetig
Kein npm install, kein webpack, kein Vite. SCSS einfuegen und in Sekunden CSS erhalten.
Offizielles Dart Sass
Verwendet den offiziellen Dart-Sass-Compiler (WebAssembly). Volle Kompatibilitaet mit dem modernen Standard.
Volle Privatsphaere
Alles laeuft in deinem Browser. Dein Code wird nie an irgendeinen Server gesendet.
Mixins, Variablen, Verschachtelung
Vollstaendige Unterstuetzung: $Variablen, &:Selektoren, @mixin/@include, @extend und Schleifen.
So funktioniert es
Drei Schritte, kein Aufwand
SCSS schreiben oder einfuegen
Fuege deinen SCSS- oder Sass-Code in den Editor ein. Variablen, Verschachtelung, Mixins, Funktionen und uebergeordnete Selektoren (&) werden vollstaendig unterstuetzt.
Sofortige Kompilierung
Das CSS-Ergebnis erscheint automatisch im rechten Bereich. Der Compiler laeuft lokal in deinem Browser.
CSS kopieren oder herunterladen
Kopiere das generierte CSS in die Zwischenablage oder lade es als fertige .css-Datei fuer die Produktion herunter.
FAQ
Noch Fragen?
Sass hat zwei Syntaxen. Die urspruengliche Syntax (.sass-Erweiterung, 2006) verwendet Einrueckung statt geschweifter Klammern und Semikolons. Sie ist kompakter, unterbricht aber die Kompatibilitaet mit Standard-CSS. SCSS (Sassy CSS, .scss-Erweiterung) wurde in Sass 3.0 im Jahr 2010 mit einer vollstaendig CSS-kompatiblen Syntax eingefuehrt: Jedes gueltige CSS ist auch gueltiges SCSS. SCSS wurde schnell zum De-facto-Standard und wird von den meisten Entwicklern heute verwendet. Dieses Tool unterstuetzt beide Syntaxen.
SCSS-Variablen werden mit dem $-Praefix definiert und koennen Farben, Groessen, Schriftarten oder jeden anderen CSS-Wert speichern. Zum Beispiel: $primary-color: #3498db; oder $spacing: 16px. Sie werden direkt in Eigenschaften verwendet. Im Gegensatz zu CSS Custom Properties (--variable) werden SCSS-Variablen zur Kompilierzeit aufgeloest und existieren nicht im resultierenden CSS. Fuer dynamischen Zugriff zur Laufzeit mit JavaScript sind CSS Custom Properties das richtige Werkzeug.
In der SCSS-Community gilt eine ungeschriebene Regel: nicht mehr als drei bis vier Ebenen Verschachtelung. Tiefe Verschachtelung erzeugt sehr spezifische CSS-Selektoren, die schwer zu ueberschreiben sind und die Spezifizitaet unnotig erhoehen. Die BEM-Methodik (Block-Element-Modifikator) harmoniert gut mit SCSS, da sie die Verschachtelung auf ein bis zwei Ebenen beschraenkt. Der uebergeordnete Selektor & ist fuer Pseudo-Klassen wie &:hover und &:focus sowie fuer Modifikatoren nuetzlich, ohne die Tiefe semantisch zu erhoehen.
Ja. Mixins sind einer der Grundpfeiler von SCSS: Mit @mixin name($params) definiert und mit @include name(values) aufgerufen. Sie erlauben die Wiederverwendung von CSS-Bloecken mit Variationen. Das Tool unterstuetzt auch @extend (Selektorvererbung), @function (benutzerdefinierte Funktionen), @each, @for und @while (Schleifen) sowie @if und @else (Bedingte Ausdruecke).
Es gibt Situationen, in denen die Einrichtung einer Node.js-Umgebung unpraktisch ist: schnelles Erkunden von SCSS ohne ein Projekt anzulegen, Arbeiten auf einem Rechner ohne Installationsrechte, Live-Demos durchfuehren oder einfach die Syntax erlernen. Dieses Tool verwendet den offiziellen Dart-Sass-Compiler (die aktuelle Referenzimplementierung, seit der Abkuendigung von LibSass im Oktober 2020) als WebAssembly und gewaehrleistet so vollstaendige Kompatibilitaet mit dem modernen SCSS-Standard.
LibSass war die C/C++-Implementierung von Sass, die vom npm-Paket node-sass verwendet wurde, jahrelang die beliebteste Methode zur SCSS-Kompilierung in Node.js-Projekten. Das Sass-Team stellte LibSass im Oktober 2020 ein, weil es mit neuen Spezifikationen nicht Schritt halten konnte. Dart Sass ist seitdem die Referenzimplementierung. Wenn du Projekte mit node-sass betreibst, ist die Migration zum Paket sass empfohlen, das in den meisten Faellen ein Drop-in-Ersatz ist.
SCSS online in CSS kompilieren: Sass ohne npm oder Node.js im Browser
Sass (Syntactically Awesome Style Sheets) ist eine CSS-Vorverarbeitungssprache, die von Hampton Catlin erstellt und hauptsaechlich von Natalie Weizenbaum und Chris Eppstein entwickelt wurde. Die erste Version wurde im November 2006 als Teil des Haml-Frameworks fuer Ruby veroeffentlicht. Die urspruengliche Syntax verwendete Einrueckung statt geschweifter Klammern, was die Datei kompakter, aber inkompatibel mit bestehendem CSS machte. Diese Adoptionsbarriere war der Katalysator fuer die Erstellung von SCSS (Sassy CSS), eingefuehrt in Sass 3.0 im Oktober 2010: eine neue Syntax, die vollstaendig mit CSS3 kompatibel ist. Die Kernfunktionen von SCSS, naemlich $-Praefix-Variablen, Selektorverschachtelung, der &-uebergeordnete Selektor, @mixin- und @include-Direktiven sowie @extend fuer Vererbung, loesten die Wartbarkeitsprobleme von reinem CSS, mit denen die Branche seit Jahren konfrontiert war.
Das CSS-Praeprocessor-Oekosystem hatte seinen Hoehepunkt zwischen 2012 und 2018. LESS (2009 von Alexis Sellier erstellt) war Sass' erster ernsthafter Konkurrent und gewann durch Bootstrap 3 (2013) massive Verbreitung. SCSS gewann den Oekosystem-Kampf teilweise durch die Uebernahme in Bootstrap 4 (2018, das von LESS zu SCSS migrierte) und teilweise dadurch, dass es der Standard in Angular wurde. Sass-Implementierungen haben sich erheblich weiterentwickelt: Ruby Sass (2006 bis 2019, die urspruengliche Implementierung, inzwischen nicht mehr gewartet), LibSass (C/C++-Implementierung, verwendet von node-sass, im Oktober 2020 eingestellt) und Dart Sass (die aktuelle Referenzimplementierung, seit 2016 veroeffentlicht und seit 2018 als npm-Paket sass verfuegbar).
Der Bedarf nach einem Online-SCSS-Compiler entsteht in sehr spezifischen Kontexten des Frontend-Entwicklungs-Workflows. Der haeufigste ist die schnelle Erkundung: Ein Entwickler moechte testen, wie ein bestimmtes Mixin kompiliert, oder das CSS-Ergebnis eines bestimmten Verschachtelungsmusters verstehen, ohne ein neues Projekt zu erstellen. Die naechste Alternative ist der offizielle Sass Playground (sass-lang.com/playground), aber seine Oberflaeche ist minimal. Ein weiterer Fall ist die Arbeit in Umgebungen ohne Installationsberechtigungen: Unternehmensrechner mit npm-Beschraenkungen, schreibgeschuetzte CI/CD-Umgebungen oder Schulungssessions. Der Compiler von Convertir.ai verwendet Dart Sass als WebAssembly, das vollstaendig in deinem Browser laeuft und keinen Code an externe Server sendet.