Stylus til CSS-konverterer — Gratis Online
Konverter Stylus-forprosessorkode til standard CSS umiddelbart, gratis, kun i nettleseren.
Stylus-inndata
Konvertert CSS
Eksempler på Stylus til CSS
Stylus-variabler og nesting kompileres til vanlig CSS. Eksempel:
Variabler og nestede selektorer
Stylus-inndata:
Kompilert CSS:
Bruk Eksempel over for å laste mer eksempeldata.
Hva er Stylus til CSS?
Du har en .styl-fil med variabler, nestede selektorer og den rene minimale syntaksen — men nettleseren forstår bare vanlig CSS. Dette verktøyet lukker det gapet. Stylus er en CSS-forprosessor kjent for sin fleksible syntaks: krøllparenteser, semikolon og kolon er alle valgfrie. Som Sass/SCSS og Less må det kompileres før nettlesere kan bruke det. I et fullstendig prosjekt ville du brukt den offisielle Stylus npm-pakken — for raske sjekker eller utdrag er det overdrevent. Dette verktøyet kjører konverteringen helt i nettleseren din. Utdataene følger W3C CSS-spesifikasjonen.
Lim inn Stylus eller last opp en .styl-fil. Verktøyet håndterer variabler, nesting og &-forelderselektor. Det kjører helt i nettleseren din. For SCSS eller Less bruker du SCSS til CSS eller Less til CSS. For formatering av utdata: CSS-formaterer.
Slik bruker du verktøyet
Lim inn eller last opp Stylus
Lim Stylus-koden inn i editoren til venstre eller klikk Last opp for en .styl-fil. Eksempel laster eksempel-Stylus med variabler og nesting.
Se gjennom CSS-utdata
Høyre panel viser kompilert CSS. For kompleks Stylus (mixins, funksjoner, importer) kan du trenge den offisielle Stylus-kompilatoren. For validering: CSS-validator.
Kopier eller last ned
Bruk Kopier eller Last ned for å lagre CSS. For minifisering: CSS-minifiserer. For å konvertere CSS til SCSS eller Less: CSS til SCSS eller CSS til Less.
Når Stylus-konvertering hjelper
Stylus brukes i prosjekter med Vite, Webpack eller Gulp. Når du trenger å kompilere et utdrag uten full build, eller se hva Stylus produserer, hjelper verktøyet. Build-pipelines bruker vanligvis den offisielle Stylus-pakken.
For andre forprosessorer: SCSS til CSS eller Less til CSS. For å kombinere CSS-filer: CSS-kombinerer. For å trekke ut CSS fra HTML: CSS-ekstraktor.
Ofte stilte spørsmål
Hvordan konverterer jeg Stylus til CSS uten å installere noe?
Lim inn Stylus-koden i dette verktøyet og CSS vises umiddelbart. Alt kjører i nettleseren via JavaScript — ingen npm, ingen Node.js, ingen build-steg. Koden forlater aldri enheten din.
Støtter dette verktøyet Stylus-variabler og nesting?
Ja. Variabler (f.eks. $primary = #007bff), nestede selektorer og &-foreldreselektoren støttes alle. For avanserte funksjoner som mixins, funksjoner og @import, bruk den offisielle Stylus-kompilatoren.
Hva er forskjellen mellom Stylus, SCSS og Less?
Alle tre er CSS-forprosessorer. Stylus har den mest fleksible syntaksen — krøllparenteser, semikolon og kolon er alle valgfrie. SCSS er et CSS-supersett. Less ligner SCSS i syntaks.
Hvorfor virker ikke funksjoner som darken()?
Innebygde Stylus-funksjoner som darken() krever det fullstendige Stylus-kjøremiljøet. Dette verktøyet gjør bare statisk konvertering. For full støtte, installer Stylus via npm.
Sendes Stylus-koden min til en server?
Nei. All konvertering kjører helt i nettleseren din. Stylus-koden forlater aldri enheten din — ingen backend, ingen logging.