CSS zu Stylus
CSS in eingerückte Stylus-Syntax umwandeln: ohne Klammern und Semikolons, verschachtelt und mit Farbvariablen.
CSS zu Stylus wandelt CSS in die eingerückte Stylus-Syntax um: ohne geschweifte Klammern und Semikolons, mit verschachtelten Selektoren, &:hover für Pseudo-Klassen und übernommenen Media Queries. Mehrfach genutzte Farben werden auf Wunsch als Variablen definiert. Die Umwandlung passiert lokal im Browser.
Stylus
Stylus-Syntax aus CSS
Stylus verzichtet auf Klammern und Semikolons; die Einrückung bestimmt die Struktur. Deshalb ist eine einheitliche Einrückung wichtig: Mische nicht Tabs und Leerzeichen in einer Datei.
| CSS | Stylus |
|---|---|
.nav a { color: red; } | .nav → eingerückt a → color: red |
a:hover | &:hover |
| Wiederholte Farbe | color-1 = #0f172a |
Zurück zu CSS: Stylus zu CSS. Für SCSS: CSS zu SCSS.
Häufige Fragen
Warum bleiben die Doppelpunkte stehen?
Stylus erlaubt beide Schreibweisen. Mit Doppelpunkt sind Werte wie Schriftnamen, URLs oder grid-template-areas eindeutig. Wer es knapper mag, kann die Doppelpunkte nachträglich entfernen.
Wie werden Variablen geschrieben?
In Stylus ohne Sonderzeichen: color-1 = #0f172a. Danach steht der Name direkt im Wert, etwa background: color-1.
Kann ich das Ergebnis testen?
Ja, mit dem Stylus-zu-CSS-Compiler auf dieser Seite. Er übersetzt das Ergebnis zurück in CSS, sodass du es mit deinem Ausgangscode vergleichen kannst.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.