Less til CSS-kompilator — Gratis Online
Kompiler Less-kode til nettleserklar CSS øyeblikkelig. Gratis, kjører i nettleseren.
Less-inndata
Kompilert CSS
Eksempler på Less til CSS
Less-variabler, miksiner og nesting kompileres til vanlig CSS. Eksempel:
Variabler, miksiner og nestede selektorer
Less-inndata:
Kompilert CSS:
Bruk Eksempel ovenfor for å laste inn mer eksempeldata.
Hva er Less til CSS?
Less er en CSS-forprosessor som legger til variabler, nesting, miksiner og funksjoner. Nettlesere kjører ikke Less — de trenger vanlig CSS. Dette verktøyet kompilerer Less-koden din til nettleserklar CSS. Less-dokumentasjonen definerer syntaksen.
Kompileringen kjører helt i nettleseren din — ingenting sendes til en server. Utdataene er standard CSS. For omvendt retning (CSS til Less), bruk CSS til Less. For SCSS, bruk SCSS til CSS.
Slik bruker du verktøyet
Lim inn eller last opp Less
Kopier Less-koden din og lim den inn i venstre editor. Du kan også klikke Last opp for å laste inn en .less- eller .css-fil. Eksempel-knappen laster inn eksempeldata. Ugyldig Less viser en feilmelding.
Se den kompilerte CSS-en
Høyre panel viser den kompilerte CSS-en. Variabler er løst, nesting er flattet ut, og miksiner er utvidet. Utdataene er vanlig CSS som enhver nettleser kan bruke.
Kopier eller last ned
Bruk Kopier eller Last ned. For formatering av utdataene, bruk CSS-formatereren. For minifisering, bruk CSS-minifisereren.
Når Less til CSS hjelper
Når du har Less fra et prosjekt (f.eks. Bootstrap 3, Ant Design) eller en eldre kodebase men trenger vanlig CSS — for en rask test, CDN-distribusjon eller et system uten byggverktøy — hjelper denne kompileringen. Den er også nyttig for feilsøking: se nøyaktig hvilken CSS Less-koden din produserer.
Less brukes av mange eldre prosjekter og noen UI-rammeverk. Hvis du tilpasser variabler eller henter ut stiler, gir kompilering her deg den endelige CSS-en. For å konvertere eksisterende CSS til Less-struktur, bruk CSS til Less.
Ofte stilte spørsmål
Less vs SCSS?
Begge legger til variabler, nesting og miksiner. Less bruker & for overordnede selektorer; SCSS bruker & også. Syntaksen er litt forskjellig. Velg basert på prosjektet ditt.
Støtter den @import?
Importer løses kanskje ikke hvis filer ikke er lastet opp. For flerfils-prosjekter, bruk den offisielle Less-kompilatoren eller bundleren din.
Er dataene mine private?
Ja. Kompileringen kjører helt i nettleseren din. Ingen data sendes til noen server.
Hva med miksiner og funksjoner?
Miksiner og innebygde funksjoner (f.eks. lighten(), darken()) utvides under kompilering. CSS-utdataene inneholder de løste verdiene.
Kan jeg bruke det med Bootstrap 3?
Bootstrap 3 bruker Less. For full Bootstrap-kompilering, bruk den offisielle builden. Dette verktøyet fungerer for enkeltfil-Less eller kodesnutt.
Relaterte verktøy
For Less, se lesscss.org og Less-bruk. MDN CSS og W3C CSS definerer utdataformatet.