Stylus zu CSS Konverter
Stylus-Preprocessor-Code in Standard-CSS konvertieren
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?
Stylus ist ein CSS-Preprocessor mit optionalen Klammern, Variablen, Mixins und Verschachtelung. Wie Sass und Less kompiliert es zu Standard-CSS für Browser. Dieses Tool konvertiert Stylus zu CSS in Ihrem Browser—kein Build-Schritt nötig. Die W3C-CSS-Spezifikation definiert die Ausgabe.
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
Sind meine Daten privat?
Ja. Die Konvertierung läuft vollständig in Ihrem Browser. Keine Daten werden an einen Server gesendet.
Unterstützt es alle Stylus-Features?
Dieses Tool unterstützt Variablen, Verschachtelung und den &-Parent-Selektor. Mixins, Funktionen, @import und andere erweiterte Features benötigen möglicherweise den offiziellen Compiler.
Stylus vs SCSS vs Less?
Alle sind CSS-Preprocessors. Stylus hat minimale Syntax (optionale Klammern/Semikolons). SCSS ist CSS-kompatibel. Less ist SCSS ähnlich. Nutzen Sie den, der zu Ihrem Stack passt.
Was ist mit darken(), lighten()?
Eingebaute Stylus-Funktionen wie <code>darken()</code> werden von diesem einfachen Konverter nicht ausgewertet. Für volle Unterstützung nutzen Sie den offiziellen Stylus-Compiler in Ihrem Build.
Kann ich CSS zu Stylus konvertieren?
Dieses Tool konvertiert nur Stylus zu CSS. Für CSS zu einem anderen Preprocessor CSS zu SCSS oder CSS zu Less.