Less–CSS-kääntäjä — Ilmainen verkossa
Käännä Less-koodi selainvalmiiksi CSS:ksi välittömästi. Ilmainen, toimii selaimessa.
Less-syöte
Käännetty CSS
Esimerkkejä Less–CSS-muunnoksesta
Less-muuttujat, mixit ja sisäkkäisyys kääntyvät tavalliseksi CSS:ksi. Esimerkki:
Muuttujat, mixit ja sisäkkäiset selektorit
Less-syöte:
Käännetty CSS:
Lataa lisää esimerkkejä Esimerkki-painikkeella.
Mikä on Less–CSS-muunnin?
Less on CSS-esikäsittelijä, joka lisää muuttujat, sisäkkäisyyden, mixit ja funktiot. Selaimet eivät osaa ajaa Less-koodia suoraan — ne tarvitsevat tavallista CSS:ää. Tämä työkalu kääntää Less-koodisi selainvalmiiksi CSS:ksi. Less-dokumentaatio määrittelee syntaksin.
Kääntäminen tapahtuu kokonaan selaimessasi — mitään ei lähetetä palvelimelle. Tulos on standardia CSS:ää. Käänteiseen suuntaan (CSS Lessiksi) käytä CSS–Less-muunninta. SCSS:lle löytyy oma SCSS–CSS-muunnin.
Näin käytät työkalua
Liitä tai lataa Less-koodi
Kopioi Less-koodisi ja liitä se vasempaan editoriin. Voit myös klikata Lataa tiedosto avataksesi .less- tai .css-tiedoston. Esimerkki-painike lataa valmista esimerkkidataa. Virheellinen Less näyttää virheilmoituksen.
Tarkastele käännettyä CSS:ää
Oikea paneeli näyttää käännetyn CSS:n. Muuttujat on ratkaistu, sisäkkäisyys tasattu ja mixit laajennettu. Tulos on tavallista CSS:ää, jota mikä tahansa selain voi käyttää.
Kopioi tai lataa
Käytä Kopioi- tai Lataa-painiketta. Tulosteen muotoiluun käytä CSS-muotoilutyökalua. Tiivistämiseen käytä CSS-tiivistintä.
Milloin Less–CSS-muunnin auttaa
Kun sinulla on Less-koodia projektista (esim. Bootstrap 3, Ant Design) tai vanhasta koodipohjasta mutta tarvitset tavallista CSS:ää — pikatestaukseen, CDN-käyttöönottoon tai ympäristöön ilman build-työkaluja — tämä kääntäminen auttaa. Se on hyödyllinen myös virheenkorjaukseen: näet täsmälleen mitä CSS:ää Less-koodisi tuottaa.
Less on käytössä monissa vanhemmissa projekteissa ja UI-kehyksissä. Jos muokkaat muuttujia tai poimit tyylejä, kääntäminen täällä antaa valmiin CSS:n. Olemassa olevan CSS:n muuntamiseen Less-rakenteeksi käytä CSS–Less-muunninta.
Usein kysytyt kysymykset
Less vai SCSS?
Molemmat lisäävät muuttujat, sisäkkäisyyden ja mixit. Less käyttää &:ia yläselektoreille; SCSS käyttää myös &:ia. Syntaksi eroaa hieman. Valitse projektisi mukaan.
Tukeeko se @import-lauseketta?
Tuonnit eivät välttämättä ratkea, jos tiedostoja ei ole ladattu. Usean tiedoston projekteissa käytä virallista Less-kääntäjää tai bundleria.
Ovatko tietoni yksityisiä?
Kyllä. Kääntäminen tapahtuu kokonaan selaimessasi. Mitään tietoja ei lähetetä palvelimelle.
Entä mixit ja funktiot?
Mixit ja sisäänrakennetut funktiot (esim. lighten(), darken()) laajennetaan kääntämisen aikana. Tulostava CSS sisältää ratkotut arvot.
Voinko käyttää Bootstrap 3:n kanssa?
Bootstrap 3 käyttää Lessiä. Koko Bootstrapin kääntämiseen käytä virallista buildia. Tämä työkalu toimii yksittäisille Less-tiedostoille tai pätkille.
Aiheeseen liittyvät työkalut
Less-dokumentaatiosta löydät lisätietoja osoitteesta lesscss.org ja Less-käyttöohjeesta. MDN CSS ja W3C CSS määrittelevät tulostusmuodon.