Stylus zu CSS Konverter — Kostenlos Online
Stylus-Preprocessor-Code sofort in Standard-CSS konvertieren, kostenlos, nur im Browser.
Stylus-Eingabe
Konvertiertes CSS
Stylus zu CSS Beispiele
Stylus-Variablen und Verschachtelung kompilieren zu reinem CSS. Beispiel:
Variablen und verschachtelte Selektoren
Eingabe Stylus:
Kompiliertes CSS:
Nutzen Sie oben Beispiel, um weitere Beispieldaten zu laden.
Was ist Stylus zu CSS?
Sie haben eine .styl-Datei mit Variablen, verschachtelten Selektoren und dieser sauberen minimalen Syntax — aber der Browser versteht nur gewöhnliches CSS. Diese Lücke schließt dieses Tool. Stylus ist ein CSS-Preprocessor, der für seine flexible Syntax bekannt ist: Klammern, Semikolons und Doppelpunkte sind alle optional. Wie Sass/SCSS und Less muss es kompiliert werden, bevor Browser es verwenden können. In einem vollständigen Projekt würden Sie das offizielle Stylus npm-Paket nutzen — für schnelle Tests oder Snippets ist das überdimensioniert. Dieses Tool führt die Konvertierung vollständig in Ihrem Browser durch. Die Ausgabe folgt der W3C-CSS-Spezifikation.
Fügen Sie Stylus ein oder laden Sie eine .styl-Datei hoch. Das Tool verarbeitet Variablen, Verschachtelung und den &-Parent-Selektor. Es läuft vollständig in Ihrem Browser. Für SCSS oder Less SCSS zu CSS oder Less zu CSS. Zum Formatieren der Ausgabe den CSS Formatierer.
So verwenden Sie dieses Tool
Stylus einfügen oder hochladen
Fügen Sie Ihren Stylus-Code in den linken Editor ein oder klicken Sie auf Hochladen, um eine .styl-Datei zu laden. Nutzen Sie Beispiel zum Laden von Beispiel-Stylus mit Variablen und Verschachtelung.
CSS-Ausgabe prüfen
Das rechte Panel zeigt das kompilierte CSS. Für komplexes Stylus (Mixins, Funktionen, Imports) kann der offizielle Stylus-Compiler nötig sein. Zur Validierung den CSS Validator.
Kopieren oder Herunterladen
Nutzen Sie Kopieren oder Herunterladen, um das CSS zu speichern. Zum Minimieren den CSS Minimierer. Zum Konvertieren von CSS zu SCSS oder Less CSS zu SCSS oder CSS zu Less.
Wann Stylus-Konvertierung hilft
Stylus wird in Projekten mit Vite, Webpack oder Gulp genutzt. Wenn Sie einen Snippet ohne vollständigen Build kompilieren oder prüfen möchten, was Stylus erzeugt, hilft dieses Tool. Build-Pipelines nutzen typischerweise das offizielle Stylus-Paket.
Für andere Preprocessors SCSS zu CSS oder Less zu CSS. Zum Kombinieren von CSS-Dateien den CSS Combiner. Zum Extrahieren von CSS aus HTML den CSS Extractor.
Häufig gestellte Fragen
Wie konvertiere ich Stylus zu CSS ohne Installation?
Einfach Ihren Stylus-Code in dieses Tool einfügen — das CSS erscheint sofort. Alles läuft im Browser per JavaScript, kein npm, kein Node.js, kein Build-Schritt. Ihr Code verlässt Ihr Gerät nicht.
Unterstützt dieses Tool Stylus-Variablen und Verschachtelung?
Ja. Variablen (z.B. $primary = #007bff), verschachtelte Selektoren und der &-Parent-Selektor werden unterstützt. Für erweiterte Features wie Mixins, Funktionen und @import nutzen Sie den offiziellen Stylus-Compiler.
Was ist der Unterschied zwischen Stylus, SCSS und Less?
Alle drei sind CSS-Preprocessors. Stylus hat die flexibelste Syntax — Klammern, Semikolons und Doppelpunkte sind alle optional. SCSS ist eine CSS-Obermenge. Less ist JavaScript-basiert und SCSS ähnlich.
Warum funktionieren Funktionen wie darken() nicht?
Eingebaute Stylus-Funktionen wie darken() benötigen die vollständige Stylus-Runtime. Dieses Tool führt nur statische Konvertierung durch. Für vollständige Funktionsunterstützung installieren Sie Stylus via npm.
Wird mein Stylus-Code an einen Server gesendet?
Nein. Alle Konvertierungen laufen vollständig in Ihrem Browser. Ihr Stylus-Code verlässt Ihr Gerät nicht — kein Backend, keine Protokollierung.