Stylus → CSS -muunnin — Ilmainen Online
Muunna Stylus-esikäsittelijäkoodi tavalliseksi CSS:ksi välittömästi, ilmaiseksi, vain selaimessa.
Stylus-syöte
Muunnettu CSS
Esimerkkejä Stylus → CSS
Stylus-muuttujat ja sisäkkäisyys käännetään tavalliseksi CSS:ksi. Esimerkki:
Muuttujat ja sisäkkäiset valitsimet
Stylus-syöte:
Käännetty CSS:
Käytä yllä olevaa Esimerkki-painiketta ladataksesi lisää esimerkkidataa.
Mikä on Stylus → CSS?
Sinulla on .styl-tiedosto muuttujilla, sisäkkäisillä valitsimilla ja sillä puhtaalla minimisyntaksilla — mutta selain ymmärtää vain tavallista CSS:ää. Tämä työkalu täyttää sen aukon. Stylus on CSS-esikäsittelijä, joka tunnetaan joustavasta syntaksistaan: aaltosulkeet, puolipisteet ja kaksoispisteet ovat kaikki valinnaisia. Kuten Sass/SCSS ja Less, se on käännettävä ennen kuin selaimet voivat käyttää sitä. Täydessä projektissa käyttäisit virallista Stylus npm-pakettia — nopeisiin tarkistuksiin tai pätkiin se on ylimitoitettu. Tämä työkalu suorittaa muunnoksen kokonaan selaimessasi. Tulos noudattaa W3C CSS -spesifikaatiota.
Liitä Stylus tai lataa .styl-tiedosto. Työkalu käsittelee muuttujat, sisäkkäisyyden ja &-ylävalitsimen. Se toimii kokonaan selaimessasi. SCSS:lle tai Lessille käytä SCSS CSS:ksi tai Less CSS:ksi. Tuloksen muotoiluun käytä CSS-muotoilijaa.
Miten työkalua käytetään
Liitä tai lataa Stylus
Liitä Stylus-koodi vasempaan editoriin tai napsauta Lataa avataksesi .styl-tiedoston. Esimerkki lataa Stylus-esimerkin muuttujilla ja sisäkkäisyydellä.
Tarkista CSS-tulos
Oikea paneeli näyttää käännetyn CSS:n. Monimutkaiselle Stylusille (mixin, funktiot, importit) saattaa tarvita virallista Stylus-kääntäjää. Validointiin käytä CSS-tarkistinta.
Kopioi tai lataa
Käytä Kopioi tai Lataa tallentaaksesi CSS:n. Tiivistämiseen käytä CSS-tiivistintä. CSS:n muuntamiseen SCSS:ksi tai Lessiksi käytä CSS SCSS:ksi tai CSS Lessiksi.
Milloin Stylus-muunnoksesta on hyötyä
Stylusia käytetään projekteissa, jotka rakentuvat Vitellä, Webpackilla tai Gulpilla. Kun tarvitset pätkän käännöstä ilman täyttä buildia tai haluat nähdä mitä Stylus tuottaa, työkalu auttaa. Build-putket käyttävät yleensä virallista Stylus-pakettia.
Muihin esikäsittelijöihin käytä SCSS CSS:ksi tai Less CSS:ksi. CSS-tiedostojen yhdistämiseen CSS-yhdistin. CSS:n irrottamiseen HTML:stä CSS-poiminta.
Usein kysyttyä
Miten muunnan Stylusin CSS:ksi asentamatta mitään?
Liitä Stylus-koodisi tähän työkaluun ja CSS ilmestyy välittömästi. Kaikki toimii selaimessa JavaScriptin avulla — ei npm:ää, ei Node.js:ää, ei build-vaihetta. Koodisi ei koskaan poistu laitteeltasi.
Tukeeko tämä työkalu Stylus-muuttujia ja sisäkkäisyyttä?
Kyllä. Muuttujia (esim. $primary = #007bff), sisäkkäisiä valitsimia ja &-ylävalitsinta tuetaan. Edistyneille ominaisuuksille kuten mixineille, funktioille ja @importille käytä virallista Stylus-kääntäjää.
Mitä eroa on Styluksella, SCSS:llä ja Lessillä?
Kaikki kolme ovat CSS-esikäsittelijöitä. Styluksella on joustavin syntaksi — aaltosulkeet, puolipisteet ja kaksoispisteet ovat kaikki valinnaisia. SCSS on CSS:n ylijoukko. Less muistuttaa SCSS:ää syntaksiltaan.
Miksi funktiot kuten darken() eivät toimi?
Sisäänrakennetut Stylus-funktiot kuten darken() vaativat täydellisen Stylus-ajoympäristön. Tämä työkalu tekee vain staattisen muunnoksen. Täydelle funktiotuelle asenna Stylus npm:llä.
Lähetetäänkö Stylus-koodini palvelimelle?
Ei. Kaikki muunnokset suoritetaan kokonaan selaimessasi. Stylus-koodisi ei koskaan poistu laitteeltasi — ei backendia, ei lokitusta.