CSS zu SCSS
Normales CSS in verschachteltes SCSS umwandeln: Selektoren gruppieren, &:hover erzeugen und mehrfach genutzte Farben als Variablen auslagern.
CSS zu SCSS wandelt normales CSS in verschachteltes SCSS um. Selektoren mit gemeinsamem Anfang werden ineinander geschachtelt, Pseudo-Klassen wie :hover werden zu &:hover, Media Queries bleiben erhalten. Auf Wunsch lagert das Tool mehrfach verwendete Farben als $-Variablen aus. Die Umwandlung läuft komplett im Browser.
SCSS
Von CSS zu SCSS
Jede CSS-Datei ist bereits gültiges SCSS. Der Mehrwert entsteht erst durch Verschachtelung und Variablen: Zusammengehörige Regeln stehen beieinander, und eine Farbe wird nur an einer Stelle gepflegt.
| CSS | SCSS |
|---|---|
.nav a { … } | .nav { a { … } } |
.nav a:hover | &:hover im Block von a |
.card > h2 | & > h2 im Block von .card |
#0f172a (mehrfach) | $color-1 |
Zurück zu CSS geht es mit SCSS zu CSS. Für LESS und Stylus gibt es CSS zu LESS und CSS zu Stylus.
Häufige Fragen
Wie wird verschachtelt?
Jeder Selektor wird in seine Teile zerlegt, etwa .nav a:hover in .nav, a und &:hover. Regeln mit gleichem Anfang landen im selben Block. Ebenen ohne eigene Deklarationen werden zusammengefasst, damit keine leeren Hüllen entstehen.
Ändert sich die Reihenfolge der Regeln?
Regeln mit demselben Selektor-Anfang werden zusammengeführt. In seltenen Fällen, wenn sich zwei Regeln gleicher Spezifität gegenseitig überschreiben, kann sich dadurch das Ergebnis ändern. Prüfe das kompilierte CSS bei kritischen Stellen mit dem SCSS-zu-CSS-Compiler.
Was passiert mit Selektorlisten wie „h1, h2“?
Sie werden nicht zerlegt, sondern als eigener Block übernommen, damit die Bedeutung erhalten bleibt. Kommentare entfallen bei der Umwandlung.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.