CSS Lessiksi — Ilmainen muunnin sisäkkäistyksellä
Muunna CSS Lessiksi välittömästi selaimessa. Sisäkkäisyys johdetaan automaattisesti, ei tietoja lähetetä. Ilmainen, ei asennusta.
CSS-syöte
Muunnettu Less
Esimerkkejä CSS → Less
Tasaiset CSS-valitsimet muunnetaan sisäkkäiseksi Lessiksi. Esimerkki:
Sisäkkäinen rakenne tasaisesta CSS:stä
CSS-syöte:
Muunnettu Less:
Käytä yllä olevaa Esimerkki-painiketta ladataksesi lisää dataa.
Mikä on CSS Lessiksi?
Less on CSS-esikäsittelijä, joka lisää muuttujia, sisennystä ja mixinejä. Tavallisen CSS:n muuntaminen Lessiksi järjestää sen sisäkkäisesti ja valmistelee Less-ominaisuuksia varten. Työkalu analysoi CSS:si ja tuottaa Less-tyylistä rakennetta. W3C:n CSS-määrittelyt kuvaavat lähdon; Less määrittää tuloksen.
Muunnos tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Tulos on kelvollista Lessiä. Käänteiseen (Less → CSS) käytä Less CSS:ksi. SCSS:lle CSS SCSS:ksi.
Miten työkalua käytetään
Liitä tai lataa CSS
Kopioi CSS ja liitä se vasempaan editoriin. Voit myös napsauttaa Lataa ja avata .css-tiedoston. Esimerkki lataa esimerkkidataa. Virheellinen CSS näyttää virheen.
Tarkista Less-tulos
Oikea paneeli näyttää muunnetun Lessin. Valitsimet voidaan sisentää kun rakenne sen sallii. Voit lisätä muuttujia ja mixinejä käsin muunnoksen jälkeen.
Kopioi tai lataa
Käytä Kopioi tai Lataa tiedostona. Käännä Less Less CSS:ksi -työkalulla varmistaaksesi tuloksen. Muotoile CSS ensin CSS-muotoilijalla.
Milloin CSS → Less auttaa
Kun siirrät projektia tavallisesta CSS:stä Lessiin tai sinulla on suunnittelutyökalun vienti-CSS ja haluat integroida sen Less-pohjaiseen koodipohjaan (esim. Bootstrap 3, Ant Design), tämä muunnos antaa lähtökohdan. webpack ja Gulp kääntävät Lessiä. Tulos antaa sisäkkäisen rakenteen, jota voit hioa muuttujilla ja mixineillä.
Suunnittelutyökalut vievät usein pelkkää CSS:ää. Muunnos Lessiksi täällä helpottaa komponenttipohjaiseen rakenteeseen lisäämistä. SCSS:lle käytä CSS SCSS:ksi. Vendor-etuliitteisiin CSS-etuliite.
Usein kysyttyä
Lisääkö se muuttujia tai mixinejä?
Muunnin keskittyy rakenteeseen (sisennys). Se ei poimi toistuvia arvoja automaattisesti muuttujiin. Lisää muuttujat ja mixin käsin tarpeen mukaan.
Onko datani yksityinen?
Kyllä. Muunnos tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle.
Miten sisennys toimii?
Työkalu päättelee sisennystä valitsinsuhteista (esim. .parent .child → sisäkkäinen). Monimutkaiset valitsimet voivat jäädä tasaisiksi. Tarkista ja säädä tarvittaessa.
Less vs SCSS?
Molemmat lisäävät muuttujia, sisennystä ja mixinejä. Lessiä käytetään Bootstrap 3:ssa, Ant Designissa. SCSS:ää Bootstrap 4+:ssa ja monissa moderneissa kehyksissä. Valitse pinon mukaan.
Voinko kääntää tuloksen?
Kyllä. Liitä Less Less CSS:ksi -työkaluun kääntääksesi ja tarkistaaksesi. Tuloksen pitäisi vastata alkuperäistä CSS-rakennetta.
Liittyvät työkalut
Lessistä: lesscss.org. W3C CSS ja MDN CSS kuvaavat lähdemuodon. Bootstrap. webpack. Figma.