Stylus zu CSS
Stylus-Code online in CSS kompilieren: Variablen, Verschachtelung und Funktionen, Ausgabe lesbar oder minifiziert.
Stylus zu CSS kompiliert Stylus-Code direkt im Browser. Variablen, Mixins, Funktionen, Schleifen und die eingerückte Schreibweise ohne Klammern, Doppelpunkte und Semikolons werden zu normalem CSS. Fehler werden mit Zeile und Spalte gemeldet, die Ausgabe ist lesbar oder minifiziert.
CSS
Stylus-Syntax im Überblick
| Stylus | CSS |
|---|---|
primary = #2563eb | Variable, wird eingesetzt |
padding 1rem | padding: 1rem; |
| Einrückung | Verschachtelte Selektoren |
rounded() | Mixin-Aufruf |
for size in 1 2 3 | Mehrere Regeln per Schleife |
Den umgekehrten Weg geht CSS zu Stylus. Für SCSS nutzt du SCSS zu CSS.
Häufige Fragen
Was ist Stylus?
Stylus ist ein CSS-Präprozessor aus dem Node.js-Umfeld. Er erlaubt eine sehr knappe Schreibweise: Klammern, Doppelpunkte und Semikolons sind optional, Einrückung strukturiert den Code. Normales CSS ist ebenfalls gültiges Stylus.
Wird Stylus noch weiterentwickelt?
Stylus wird nur noch gepflegt, neue Funktionen kommen kaum hinzu. Für neue Projekte ist SCSS oder modernes CSS mit Verschachtelung und Custom Properties meist die bessere Wahl. Für bestehende Projekte ist der Compiler weiterhin nützlich.
Funktioniert @import?
Nein, im Browser gibt es keine weiteren Dateien. Kopiere alle benötigten Teile in die Eingabe.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.