SCSS in CSS umwandeln
Auch Less und Stylus zu CSS
Mit diesem Werkzeug können Sie SCSS in CSS umwandeln, dazu Less oder Stylus, oder aus flachem CSS wieder verschachteltes SCSS machen. Es liest verschachtelte Regeln, Variablen und Mixins und schreibt das flache CSS, das ein Browser versteht. Die Arbeit läuft in Ihrem Browser, und wir laden nichts hoch.
- KostenlosPreis
- Beide WegeRichtungen
- KeineAnmeldung
- KeineUploads
CSS-Präprozessor
SCSS, Less oder Stylus in reines CSS übersetzen, oder ein flaches Stylesheet zurück zur Verschachtelung führen
Bereit. Fügen Sie ein Stylesheet ein, oder drücken Sie eine der Beispieltasten.
Was beim SCSS in CSS umwandeln passiert
Ein Stylesheet mit Verschachtelung ist kein gültiges CSS. Der Browser verwirft die ganze Regel und sagt nichts. Daher macht dieser CSS-Präprozessor die Verschachtelung flach, ersetzt die Variablen durch ihre Werte und schreibt das flache CSS, das ein Browser lesen kann.
Aus einem Einfügen kommen drei Dinge zurück. Zuerst das übersetzte CSS selbst, bereit zum Einfügen in eine Datei. Dann eine Liste der Variablen und Mixins, die er gefunden hat, mit dem Wert, den jede hält. Zuletzt ein Hinweisfeld, das alles benennt, was der Übersetzer selbst entscheiden musste.
Dieses letzte Feld zählt mehr, als es aussieht. Eine stille Annahme im übersetzten CSS ist ein kaputtes Layout zwei Bildschirme später. Jede Annahme wird deshalb neben der Ausgabe gedruckt statt in ihr begraben.
Der Konverter arbeitet auch rückwärts. Weil eine flache Datei schwer ordentlich zu halten ist, kann er reines CSS wieder zu verschachteltem SCSS oder Less gruppieren und die gemeinsamen Werte als Variablen herausziehen. Sie installieren nichts und Sie senden nichts.
Wie ein Präprozessor zu CSS übersetzt
Die Arbeit läuft in drei Durchgängen. Zuerst macht der Leser aus dem Quelltext eine Liste von Regeln, jede mit einem Selektor, einem Block und einer Tiefe. Dann verbindet ein zweiter Durchgang die verschachtelten Selektoren mit ihren Eltern. Zuletzt druckt ein Schreiber die flachen Regeln in ihrer Reihenfolge.
Das Verbinden der Selektoren folgt den Selektor-Regeln, die der Browser selbst verwendet. Eine einmal verschachtelte Regel wird zu einem Nachfahren-Selektor. Eine mit einem Ampersand geschriebene Regel hält ihren Elternteil verbunden, und so werden ein Hover-Zustand und eine Modifier-Klasse gebaut.
Variablen sind die zweite Aufgabe. Weil SCSS und Less beide zulassen, dass ein Name für einen Wert steht, sucht der Übersetzer jeden Namen, den er trifft, und schreibt den Wert an seine Stelle. Sass-Variablen beginnen mit einem Dollarzeichen, Less-Variablen mit einem At-Zeichen, sodass der Leser sie am ersten Zeichen unterscheidet.
Der Schreiber berührt niemals eine Browser-Schnittstelle und niemals das Netz. Die Seite arbeitet also offline. Sie arbeitet auch mit einer Datei, die Sie lieber nicht in einen gehosteten Übersetzer einfügen würden, etwa ein Stylesheet, das ein unveröffentlichtes Produkt nennt.
SCSS, Less und Stylus nebeneinander
Die drei Sprachen sind sich in der Idee einig und unterscheiden sich in der Schreibweise. Der Übersetzer liest also alle drei und schreibt eine einzige Ausgabe.
SCSS behält die Klammern und die Semikolons von CSS, weshalb es sich wie CSS mit Zusatzfunktionen anfühlt. Less tut dasselbe und erlaubt zusätzlich einen teilweisen Mixin-Aufruf ohne Klammern. Stylus lässt die Klammern, die Semikolons und oft die Doppelpunkte weg und stützt sich stattdessen auf die Einrückung.
Weil die Unterschiede klein sind, kann eine Seite alle drei lesen. Der Leser entscheidet anhand der Datei, welche Sprache er vor sich hat: ein Dollarzeichen zeigt auf SCSS, ein At-Zeichen vor einem Namen zeigt auf Less, und eine fehlende Klammer zeigt auf Stylus. Wenn der Quelltext mehrdeutig ist, sagt die Seite das im Hinweisfeld, statt zu raten.
Die Ausgabe ist in jedem Fall dieselbe. Der Browser sieht also ein einziges flaches Stylesheet, und Sie behalten den Quelltext in der Sprache, die Ihr Team ohnehin verwendet.
Warum das Verbinden der Selektoren der schwere Teil ist
Ein Übersetzer, der die beiden Selektoren mit einem Leerzeichen aneinanderklebt, macht die meisten Verschachtelungen falsch. Weil eine unter einem Elternteil verschachtelte Regel nur dann zu einem Nachfahren wird, wenn kein Ampersand vorhanden ist, verfolgt der Leser beim Hinabsteigen auf jeder Ebene den Elternteil.
Jeder Block behält also den vollständigen Selektor, den er drucken wird. Eine Regel ganz oben beginnt mit ihrem eigenen Selektor. Dann erbt eine Regel darin diesen und fügt ihren eigenen hinzu, getrennt durch ein Leerzeichen. Ein Ampersand ersetzt das Leerzeichen vollständig, und so schließt sich der Hover-Zustand eines Elternteils ohne Lücke an.
Die Reihenfolge der gedruckten Regeln ist der dritte Fall. Weil eine spätere Regel gleichen Gewichts gewinnt, behält der Schreiber auf jeder Ebene die Reihenfolge des Quelltexts. Auf diese Weise übersteht die Kaskade die Übersetzung, und eine Regel, die gewinnen sollte, gewinnt weiterhin.
Was sauber übersetzt und was einen Hinweis bekommt
Ein Übersetzer gewinnt Vertrauen, indem er seine eigenen Grenzen benennt. Daher listet das Hinweisfeld jedes Konstrukt auf, das der Leser auf eine Weise behandelt hat, die Sie prüfen sollten.
Mixin-Definitionen und -Einbindungen übersetzen, weil beide Sprachen sie in dem eingefügten Quelltext definieren. Guard-Ausdrücke von Less übersetzen, wenn die Bedingung ein einfacher Vergleich ist. Ein bewachtes Mixin setzt also den Zweig ein, der zutrifft.
Interpolation bekommt häufiger einen Hinweis. Weil ein Wert, der aus einer Variable innerhalb einer Zeichenkette gebaut wird, den Wert zur Übersetzungszeit braucht, kann der Leser ihn nur auflösen, wenn die Variable in derselben Datei steht. Ein Wert aus einem Import, den die Seite nicht hat, bleibt wie geschrieben, und der Hinweis nennt den fehlenden Namen.
Die Importe selbst bekommen ebenfalls einen Hinweis. Die Seite kann keine andere Datei holen, da sie niemals das Netz berührt. Ein At-Import bleibt also als gewöhnlicher CSS-Import in der Ausgabe, und das Feld sagt, dass die Datei nicht gelesen wurde. Das hält die Ausgabe ehrlich statt still falsch.
Die Zahl neben der Ausgabe gehört zu derselben Idee. Weil eine Übersetzung die Größe einer Datei in beide Richtungen verändern kann, meldet das Feld die geschriebenen Regeln, die Deklarationen darin und die Größe von Eingabe und Ausgabe. Ein Stylesheet, das nach dem Übersetzen gewachsen ist, ist damit auf einen Blick sichtbar statt erst nach einem Deployment.
Auf dieser Seite
- Das Tool
- Was beim SCSS in CSS umwandeln passiert
- So verwenden Sie den CSS-Präprozessor-Konverter
- Warum im Browser übersetzen
- Eine saubere Übersetzung mit jedem CSS-Präprozessor bekommen
- Sieben rutschige Fehler bei Präprozessoren
- Fragen zum CSS-Präprozessor
- Werkzeuge, die dazu passen
Weiterlesen
So verwenden Sie den CSS-Präprozessor-Konverter
Vier Schritte, und keiner braucht ein Konto.
- 1
Fügen Sie Ihr Stylesheet ein
Kopieren Sie also die ganze Datei und fügen Sie sie in den linken Kasten ein. Eine Teildatei funktioniert auch, eine einzelne Komponente mit ihrer Verschachtelung genügt zum Ausprobieren.
- 2
Wählen Sie die Richtung
Wählen Sie dann die Ausgangssprache. Für SCSS zu CSS wählen Sie SCSS als Eingabe und CSS als Ausgabe. Weil die Seite alle drei liest, übersetzt auch eine gemischte Datei.
- 3
Lesen Sie das Hinweisfeld
Prüfen Sie als Nächstes die Hinweise, bevor Sie die Ausgabe irgendwo einfügen. Ein Name, den der Übersetzer nicht auflösen konnte, ist hier leichter zu beheben als in einem Browser, der einen leeren Kasten zeigt.
- 4
Kopieren Sie das CSS heraus
Nehmen Sie zuletzt die Ausgabe. Die Kopiertaste legt das ganze Stylesheet in Ihre Zwischenablage. Speichern Sie es danach neben der Quelldatei und binden Sie es ein, wie Sie jedes andere Stylesheet einbinden.
Warum im Browser übersetzen
Fünf Gründe, warum das den üblichen Weg zu reinem CSS schlägt.
Keine Build-Kette
Sie sparen sich also die Installation. Ein Übersetzer in einem Projekt bedeutet einen Paketmanager, ein Skript und eine Konfigurationsdatei. Für ein einziges Stylesheet sind das viele bewegliche Teile.
Ihr Quelltext verlässt Sie nie
Die Übersetzung läuft in dem Tab, den Sie ohnehin offen haben. Daher bleibt ein Stylesheet unter Vertrag auf Ihrem Rechner. Nichts wird hochgeladen und nichts wird protokolliert.
Beide Richtungen
Die meisten Übersetzer laufen nur in eine Richtung. Weil diese Seite flaches CSS auch wieder zu Verschachtelung gruppiert, hilft sie, wenn Sie ein Stylesheet ohne Quelldatei erben und es aufräumen möchten.
Sie sehen die Annahmen
Dann ist da das Hinweisfeld. Ein Build-Werkzeug scheitert mit einer Zeilennummer und sonst nichts. Hier wird jede Annahme in klaren Worten neben der Ausgabe benannt.
Nichts muss laufen bleiben
Zuletzt gibt es keinen Wachprozess. Nichts baut neu, wenn Sie speichern, und nichts bricht, wenn Sie einen Monat später zurückkommen. Der CSS-Präprozessor steht also hier, bis Sie ihn brauchen.
Eine saubere Übersetzung mit jedem CSS-Präprozessor bekommen
Sechs Gewohnheiten, die die Ausgabe nah an dem halten, was Sie erwarten.
- Halten Sie den Quelltext vollständig Fügen Sie also die Datei ein, nicht einen Ausschnitt, wenn eine Variable ganz oben gesetzt wird. Weil der Leser einen Namen dort sucht, wo er definiert wurde, bekommt ein Ausschnitt ohne diese Zeile einen Hinweis.
- Passen Sie die Sprache an die Datei an Prüfen Sie dann die Richtung gegen die kopierte Datei. Eine als SCSS gelesene Less-Datei übersetzt trotzdem, aber die Ampersand-Regeln verhalten sich anders und die Ausgabe kann Sie überraschen.
- Vermeiden Sie das Mischen der beiden Eine Datei, die sowohl eine Dollar- als auch eine At-Variable enthält, ist in keiner der beiden Sprachen gültig. Teilen Sie sie also vor dem Einfügen, und das Hinweisfeld bleibt still.
- Achten Sie auf das Ampersand Das Ampersand bedeutet den Elternselektor. Daher schließt sich eine Regel damit innerhalb einer Media Query an den Elternteil außerhalb der Abfrage an, was selten gewünscht ist. Trotzdem behandelt ihn jeder CSS-Präprozessor gleich, die Regel wandert also zwischen Dateien.
- Geben Sie Ihren Mixins Namen Ein Mixin, das über einen auffindbaren Namen aufgerufen wird, setzt sauber ein. Halten Sie Mixin-Namen deshalb von Variablennamen getrennt, und die Suche hat nie zwei Kandidaten.
- Verkleinern zuletzt Erst übersetzen und danach verkleinern, in dieser Reihenfolge. Weil ein Minifier die Kommentare entfernt, wirft ein Lauf davor die Hinweise weg, die die Ausgabe erklären.
Sieben rutschige Fehler bei Präprozessoren
Jeder davon sieht im Quelltext harmlos aus und schadet im Browser.
Tiefe Verschachtelung
Fünf Ebenen Verschachtelung lesen sich gut und übersetzen zu einem Selektor, den niemand überschreiben kann. Weil jede Ebene dem Selektor Gewicht hinzufügt, verliert eine spätere Regel mit einer einzigen Klasse. Halten Sie die Verschachtelung deshalb bei drei Ebenen.
Eine doppelte Variable
Ein zweimal im selben Bereich gesetzter Name gewinnt mit dem letzten Wert. Dann sieht es aus, als ignoriere die erste Hälfte der Datei die Änderung. Das Hinweisfeld nennt den Gewinner, damit Sie ihn sehen.
Einheiten an einem Nullwert
Null Pixel und null sind in CSS dieselbe Zahl. Weil eine Variable mit einer nackten Null leichter wiederzuverwenden ist, nehmen Sie lieber die schlichte Null und lassen die Einheit weg.
Mixin-Ausgabe, die niemand geprüft hat
Ein Mixin, das ein Herstellerpräfix hinzufügt, schreibt jede Zeile in jede aufrufende Regel. Ein Aufruf in einer Schleife vervielfacht die Ausgabe also schnell. Prüfen Sie die übersetzte Größe, nicht die Größe des Quelltexts.
Interpolation in einem Selektor
Einen Klassennamen aus einer Variable zu bauen funktioniert zur Übersetzungszeit. Daher ist der Name ins CSS eingebacken und kann sich zur Laufzeit nicht ändern. Ein Theme, das beide Zustände braucht, braucht zwei echte Klassen. Ein CSS-Präprozessor ist für diese Aufgabe also der falsche Ort.
Ein Partial zweimal importieren
Zwei Importe desselben Partials schreiben seine Regeln zweimal. Dann überschreibt die zweite Kopie die erste, und eine Korrektur an einer Stelle scheint nichts zu bewirken.
Den Quelltext vergessen
Die übersetzte Datei ist das, was live geht, und sie ist nicht das, was Sie bearbeiten. Bewahren Sie den Quelltext deshalb im Repository daneben auf, sonst beginnt die nächste Änderung mit einer flachen Datei ohne Verschachtelung.
Fragen zum CSS-Präprozessor
Ist dieser CSS-Präprozessor kostenlos?
Ja. Es gibt kein Konto, kein Limit und keine kostenpflichtige Stufe. Sie übersetzen also so viele Stylesheets, wie Sie möchten.
Wird mein Stylesheet irgendwohin gesendet?
Nein. Weil Leser und Schreiber beide in Ihrem Browser laufen, verlässt der Quelltext niemals Ihren Rechner. Daher bleibt ein Stylesheet unter Vertrag privat.
Kann er SCSS in CSS übersetzen?
Ja. Fügen Sie das SCSS ein, wählen Sie SCSS als Eingabe und CSS als Ausgabe. Dann wird die Verschachtelung flach, die Variablen lösen sich auf und die Mixins werden eingesetzt.
Kann er Less in CSS übersetzen?
Ja. Das ist dieselbe Seite mit Less als Eingabe. Weil beide Sprachen dieselbe Idee der Verschachtelung teilen, unterscheidet sich nur die Schreibweise der Variablen.
Liest er Stylus?
Ja. Stylus lässt die Klammern und die Semikolons weg und stützt sich auf die Einrückung. Der Leser folgt also der Einrückung, wenn er keine Klammer findet.
Kann er CSS wieder in SCSS umwandeln?
Ja. Weil dieselbe Seite in beide Richtungen arbeitet, kann sie flache Regeln nach ihren gemeinsamen Selektoren zu Verschachtelung gruppieren und wiederholte Werte als Variablen herausziehen.
Führt er meine Mixins aus?
Er setzt ein Mixin ein, das in der eingefügten Datei definiert ist. Ein Mixin, das in einem Import liegt, den die Seite nicht lesen kann, bleibt als Aufruf stehen und bekommt einen Hinweis. Es wird also nichts geraten.
Was passiert mit einem Import?
Er bleibt in der Ausgabe als gewöhnlicher CSS-Import stehen, und das Hinweisfeld sagt, dass die Datei nicht gelesen wurde. Weil die Seite niemals das Netz berührt, kann sie die andere Datei nicht holen.
Versteht er Variablen?
Ja. Eine Sass-Variable beginnt mit einem Dollarzeichen, eine Less-Variable mit einem At-Zeichen. Der Leser unterscheidet sie also am ersten Zeichen und schreibt den Wert an die Stelle.
Verkleinert er die Ausgabe?
Er kann es. Die Wahl „Verkleinern" entfernt die Kommentare und den überflüssigen Leerraum. Trotzdem gilt: erst übersetzen, dann verkleinern, damit die Hinweise lange genug zum Lesen überleben.
Stimmt die Ausgabe genau mit meinem Build-Werkzeug überein?
Sie stimmt bei den verbreiteten Funktionen überein: Verschachtelung, Variablen, Mixins, Extends und einfache Bedingungen. Ein Konstrukt, das Ihr Build-Werkzeug mit einem Plugin löst, bekommt hier stattdessen vielleicht einen Hinweis.
Behandelt er Media Queries innerhalb einer Regel?
Ja. Weil verschachtelte Media Queries so an die oberste Ebene gehoben werden, wie ein Präprozessor sie hebt, behält die übersetzte Ausgabe dieselbe Kaskade.
Unterstützt er das Ampersand?
Ja. Eine damit geschriebene Regel hält ihren Elternteil verbunden, und so wird ein Hover-Zustand oder eine Modifier-Klasse gebaut. Der übersetzte Selektor liest sich also genauso wie im Quelltext.
Kann ich nur einen Teil einer Datei einfügen?
Ja, solange die verwendeten Variablen in dem eingefügten Teil stehen. Ein Name, der über dem kopierten Ausschnitt definiert ist, lässt sich nicht auflösen, und der Hinweis sagt das.
Schreibt er Source Maps?
Nein. Eine Source Map zeigt über einen Pfad auf die Originaldatei, den nur Ihr Build hat. Da diese Seite keine Datei zum Anzeigen hat, würde eine Map von hier aus in die Irre führen.
Funktioniert er offline?
Ja. Sobald die Seite geladen ist, wird nichts weiter geholt. Der Konverter arbeitet also auf einem Laptop in einem Raum ohne Empfang weiter.
Behält er meine Kommentare?
Er behält einen Blockkommentar standardmäßig und kann ihn entfernen, wenn Sie „Verkleinern" wählen. Ein Kopfhinweis überlebt also, und ein Hinweis, der nur beim Bearbeiten zählte, nicht.
Wie viele Ebenen Verschachtelung kann er lesen?
Es gibt keine feste Obergrenze, und die praktische Grenze setzen Sie selbst. Tiefe Verschachtelung übersetzt sauber und liest sich schlecht. Drei Ebenen sind also eine gute Gewohnheit.
Kann er eine große Datei verarbeiten?
Ja. Weil die Arbeit reine Textverarbeitung ist, übersetzt ein Stylesheet mit einigen tausend Zeilen auf einem normalen Laptop in deutlich unter einer Sekunde.
Schreibt er CSS-Custom-Properties?
Er liest und schreibt sie als gewöhnliche Deklarationen. Eine Custom-Property im Quelltext übersteht die Übersetzung also unverändert, und eine Präprozessor-Variable kann eine enthalten.
Und ein Mixin für Herstellerpräfixe?
Es wird wie jedes andere Mixin eingesetzt, was jede Zeile mit Präfix in jede aufrufende Regel schreibt. Prüfen Sie daher die übersetzte Größe statt der Größe des Quelltexts.
Prüft er auf Fehler?
Er meldet, was er nicht auflösen konnte, statt die ganze Datei abzulehnen. Sie bekommen also eine brauchbare Ausgabe plus eine Liste, statt eines Fehlers und sonst nichts.
Kann er die beiden Richtungen vergleichen?
Ja. Übersetzen Sie eine Datei in CSS und gruppieren Sie dieses CSS danach wieder, und ein verlustbehaftetes Konstrukt verrät sich selbst. Alles, was den Hin- und Rückweg nicht übersteht, hat nichts bewirkt.
Berührt er meine Zwischenablage von selbst?
Nein. Die Seite liest die Zwischenablage nur beim Einfügen und schreibt nur, wenn Sie auf Kopieren drücken. Es wird also nichts ohne einen Klick genommen oder ersetzt.
Gibt es ein Größenlimit?
Kein hartes Limit. Weil die Arbeit in Ihrem eigenen Tab läuft, ist die Obergrenze Ihr Rechner, und ein normales Stylesheet liegt weit darunter.
Funktioniert er auf einem Telefon?
Ja. Die Kästen stapeln sich, und die Kopiertaste sitzt unter der Ausgabe. Eine schnelle Übersetzung gelingt also vom Telefon aus, wenn Sie nicht an Ihrem Rechner sind.
Werkzeuge, die dazu passen
Vier Seiten, zu denen dieselbe Arbeit meist führt.
CSS-Minifier
Verkleinern Sie danach die übersetzte Datei, bevor sie live geht. Weil Verkleinern am Ende die Hinweise lesbar hält, übersetzen Sie hier zuerst und verkleinern dort danach.
Tool öffnen →CSS-Farbkonverter
Prüfen Sie auch eine Farbe, die Sie als Variable eingetippt haben. Dann sehen Sie denselben Ton als Hex, RGB und HSL, bevor er ins Stylesheet geht.
Tool öffnen →HTML-Minifier
Für das Markup, das zum Stylesheet gehört, entfernt dieser die Kommentare und den überflüssigen Leerraum. Beide Dateien kommen also ordentlicher heraus.
Tool öffnen →PX-in-REM-Konverter
Weil eine Präprozessor-Variable oft eine Schriftgröße hält, rechnet dieser die Pixel in rem um. Die Skala bleibt also nach der Übersetzung einheitlich.
Tool öffnen →
Jetzt ein Stylesheet übersetzen
Fügen Sie das SCSS oder das Less ein, lesen Sie die Hinweise und nehmen Sie das flache CSS mit. Nichts verlässt Ihren Browser, also bleibt ein Stylesheet unter Vertrag Ihr eigenes. Die ganze Arbeit passt in ein Einfügen.