Convertitore Stylus a CSS
Converti codice preprocessore Stylus in CSS standard
Input Stylus
CSS Convertito
Esempi Stylus a CSS
Le variabili e il nesting Stylus vengono compilati in CSS standard. Esempio:
Variabili e selettori annidati
Input Stylus:
CSS Compilato:
Usa Esempio sopra per caricare altri dati di esempio.
Cos'è Stylus a CSS?
Stylus è un preprocessore CSS con parentesi graffe opzionali, variabili, mixin e nesting. Come Sass e Less, compila in CSS standard per i browser. Questo strumento converte Stylus in CSS nel tuo browser — nessun build step necessario. La specifica W3C CSS definisce l'output.
Incolla Stylus o carica un file .styl. Lo strumento gestisce variabili, nesting e il selettore padre &. Funziona interamente nel tuo browser. Per SCSS o Less usa SCSS a CSS o Less a CSS. Per formattare l'output usa CSS Formatter.
Come Usare Questo Strumento
Incolla o Carica Stylus
Incolla il tuo codice Stylus nell'editor sinistro o clicca su Carica per caricare un file .styl. Usa Esempio per caricare Stylus di esempio con variabili e nesting.
Visualizza l'Output CSS
Il pannello destro mostra il CSS compilato. Per Stylus complesso (mixin, funzioni, import) potrebbe essere necessario il compilatore Stylus ufficiale. Per la validazione usa il CSS Validator.
Copia o Scarica
Usa Copia o Scarica per salvare il CSS. Per minificare usa CSS Minifier. Per convertire CSS in SCSS o Less usa CSS a SCSS o CSS a Less.
Dove la Conversione Stylus è Utile
Stylus è usato in progetti costruiti con Vite, Webpack o Gulp. Quando vuoi compilare uno snippet senza un build completo, o ispezionare cosa produce Stylus, questo strumento aiuta. Le pipeline di build usano tipicamente il pacchetto Stylus ufficiale.
Per altri preprocessori usa SCSS a CSS o Less a CSS. Per combinare file CSS usa CSS Combiner. Per estrarre CSS da HTML usa CSS Extractor.
Domande Frequenti
I miei dati sono privati?
Sì. La conversione funziona interamente nel tuo browser. Nessun dato viene inviato a nessun server.
Supporta tutte le funzionalità Stylus?
Questo strumento supporta variabili, nesting e il selettore padre &. Mixin, funzioni, @import e altre funzionalità avanzate potrebbero richiedere il compilatore ufficiale.
Stylus vs SCSS vs Less?
Tutti sono preprocessori CSS. Stylus ha sintassi minima (parentesi graffe/punto e virgola opzionali). SCSS è compatibile con CSS. Less è simile a SCSS. Usa quello più adatto al tuo stack.
Come funzionano darken(), lighten()?
Le funzioni integrate di Stylus come darken() non vengono valutate da questo convertitore di base. Per il supporto completo usa il compilatore Stylus ufficiale nel tuo build.
Posso convertire CSS a Stylus?
Questo strumento converte solo Stylus in CSS. Per convertire CSS in un altro preprocessore usa CSS a SCSS o CSS a Less.