CSS in SCSS umwandeln (verschachtelte Regeln)

So funktioniert es

Fügen Sie Ihr CSS links ein; die verschachtelte Fassung erscheint sofort rechts. Das Werkzeug zerlegt jeden Selektor an Leerzeichen und an den Kombinatoren > + ~ und schachtelt aufeinanderfolgende Regeln mit gleichem Anfang in einen Block. Die sechs Regeln im Beispiel werden zu zwei Blöcken oberster Ebene: .menu ul, .menu li und .menu a kommen in den .menu-Block, und aus .menu a:hover wird &:hover im a-Block. Regeln innerhalb von @media werden dort genauso verschachtelt, der @media-Block wird aber nie in eine Regel verschoben; das kompilierte CSS behält daher seine ursprüngliche Reihenfolge. Als Ziel wählen Sie SCSS (mit Klammern und Semikolon), LESS, eingerücktes Sass oder Stylus; die eingerückten Formate kommen ohne Klammern und Semikolon aus. Kommagetrennte Selektoren (.a, .b) werden nicht aufgeteilt. Kommentare werden entfernt, die Ergebniszeile nennt ihre Anzahl.

Dieses Werkzeug ist auch als css in scss umwandeln, css zu scss, css in sass umwandeln, css verschachteln, css to scss, css to less bekannt.

Was ist SCSS?

SCSS (Sassy CSS) ist die Schreibweise des Präprozessors Sass, die CSS am ähnlichsten sieht. Sie nutzt geschweifte Klammern und Semikolons und ergänzt verschachtelte Regeln, Variablen mit $, wiederverwendbare Blöcke per @mixin und Rechenoperationen. Browser können SCSS nicht lesen; ein Sass-Compiler wandelt die Datei zuerst in normales CSS um. Jede gültige CSS-Datei ist zugleich gültiges SCSS, daher lässt sich ein bestehendes Projekt schrittweise umstellen.

Was ist Verschachtelung (Nesting)?

Verschachtelung heißt, die untergeordneten Selektoren eines Selektors in dessen Block zu schreiben: .menu { a { } } wird zu .menu a kompiliert. Das Zeichen & steht für den übergeordneten Selektor, a { &:hover { } } ergibt also a:hover. So wiederholt man das gleiche Präfix nicht in jeder Zeile, und der Aufbau einer Komponente wird im Code sichtbar. Zu tiefe Verschachtelung erzeugt allerdings lange Selektoren mit hoher Spezifität; drei bis vier Ebenen gelten als Obergrenze.

Was unterscheidet SCSS von Sass?

Beide sind Schreibweisen desselben Sass-Compilers mit denselben Funktionen. SCSS (.scss) nutzt geschweifte Klammern und Semikolons; wer CSS kennt, kann es sofort lesen, und jede CSS-Datei ist gültiges SCSS. Eingerücktes Sass (.sass) verzichtet auf Klammern und Semikolons und trennt Blöcke allein durch Einrückung; es ist kürzer, doch ein falsches Leerzeichen ändert die Bedeutung. Neue Projekte wählen meist SCSS.

Warum die Reihenfolge der Regeln erhalten bleibt

Treffen zwei CSS-Regeln dasselbe Element mit gleicher Spezifität, gewinnt die zuletzt geschriebene. Manche Umwandler sammeln alle Regeln mit demselben Selektor-Anfang in einem Block, egal wo sie in der Datei stehen; im kompilierten CSS tauschen die Regeln dann die Plätze, und die Farbe einer Schaltfläche kann sich unbemerkt ändern. Dieses Werkzeug fasst nur aufeinanderfolgende Regeln zusammen: Steht zwischen zwei .menu-Regeln ein anderer Block, bleibt die zweite .menu-Regel ein eigener Block.

Aus demselben Grund werden @media-Regeln nie in einen Selektor verschoben. SCSS erlaubt das, aber die Reihenfolge der Ausgabe ändert sich. Variablen und Mixins werden ebenfalls nicht abgeleitet: Eine wiederkehrende Farbe wie #1c1917 in eine Variable wie $dunkel zu verwandeln, entscheidet jemand, der die Bedeutung des Codes kennt.

• .menu a { } → .menu { a { } }
• .menu a:hover { } → a { &:hover { } }
• .liste > li { } → .liste { > li { } } (Stylus: & > li)

Welches Zielformat passt

Nutzt Ihr Projekt Sass mit Dateien auf .scss, wählen Sie SCSS; das ist heute die verbreitetste Schreibweise, und jedes gültige CSS ist auch gültiges SCSS. Enden Ihre Dateien auf .sass, wählen Sie eingerücktes Sass; es hat weder Klammern noch Semikolons und zeigt die Verschachtelung allein durch Einrückung, kopieren Sie es also, ohne die Einrückung zu verändern.

Arbeiten Sie an einem älteren Theme wie Bootstrap 3 oder an einem LESS-Projekt, wählen Sie LESS; die Verschachtelung sieht aus wie bei SCSS. Stylus ist eine eingerückte Schreibweise aus Node.js-Projekten; dort werden verschachtelte Kombinatoren als & > li geschrieben.

Häufige Fragen

Wie wandle ich CSS in SCSS um?

Fügen Sie das CSS links ein. Das Werkzeug zerlegt Selektoren wie .menu a, setzt a in den .menu-Block und macht aus Zuständen wie :hover ein &:hover. Da jedes gültige CSS schon gültiges SCSS ist, würde auch ein Umbenennen der Datei in .scss funktionieren; das Werkzeug liefert zusätzlich die verschachtelte, lesbare Struktur.

Ändert sich mein kompiliertes CSS?

Nein, dieselben Regeln kommen in derselben Reihenfolge heraus. Das Werkzeug fasst nur aufeinanderfolgende Regeln zusammen, lässt @media-Blöcke an ihrem Platz und teilt kommagetrennte Selektoren nicht; zusammen halten diese drei Regeln Reihenfolge und Bedeutung fest. Nur Kommentare werden entfernt.

Werden Farben in Variablen umgewandelt?

Nein. Welche Farbe eine Markenfarbe ist und welche nur zufällig mehrfach vorkommt, verrät der Code allein nicht; die Entscheidung bleibt bei Ihnen. Wiederkehrende Werte sehen Sie in der Ausgabe und können sie von Hand in $-Variablen verschieben.

Wird mein Code irgendwohin gesendet?

Nein. Die Umwandlung läuft vollständig in Ihrem Browser; das eingefügte Stylesheet erreicht keinen Server.