Input Stylus

CSS Convertito

Esempi Stylus a CSS

Le variabili e il nesting Stylus vengono compilati in CSS standard. Przyklad:

Variabili e selettori annidati

Input Stylus:

Input

CSS Compilato:

Output

Usa Przyklad sopra per caricare altri dane 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 narzedzie converte Stylus in CSS nel tuo browser — nessun build step necessario. La specifica W3C CSS definisce l'output.

Incolla Stylus o carica un plik .styl. Lo narzedzie gestisce variabili, nesting e il selettore padre &. Funziona interamente nel tuo browser. Per SCSS o Less usa SCSS do CSS o Less a CSS. Per formattare l'output usa CSS Formatter.

Jak uzywac tego narzedzia

1

Incolla o Wczytaj Stylus

Incolla il tuo codice Stylus nell'editor sinistro o clicca su Wczytaj per caricare un plik .styl. Usa Przyklad per caricare Stylus di esempio con variabili e nesting.

2

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.

3

Kopiuj o Pobierz

Usa Kopiuj o Pobierz per salvare il CSS. Per minificare usa CSS Minifier. Per convertire CSS in SCSS o Less usa CSS do 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 narzedzie aiuta. Le pipeline di build usano tipicamente il pacchetto Stylus ufficiale.

Per altri preprocessori usa SCSS do CSS o Less a CSS. Per combinare plik CSS usa CSS Combiner. Per estrarre CSS da HTML usa CSS Extractor.

Czesto zadawane pytania

I miei dane sono privati?

Sì. La conversione funziona interamente nel tuo browser. Nessun dato viene inviato a nessun server.

Supporta tutte le funzionalità Stylus?

Questo narzedzie 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.

Jak to dzialano 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 narzedzie converte solo Stylus in CSS. Per convertire CSS in un altro preprocessore usa CSS do SCSS o CSS a Less.

Powiazane narzedzia

Per saperne di più: Stylus, W3C CSS, MDN CSS.