CSS til Less — Gratis konverterer med nesting
Konverter CSS til Less direkte i nettleseren. Nesting utledes automatisk, ingen data sendes. Gratis, ingen installasjon nødvendig.
CSS-inndata
Konvertert Less
Eksempler på CSS til Less
Flate CSS-selektorer konverteres til nestet Less. Eksempel:
Nestet struktur fra flatt CSS
CSS-inndata:
Konvertert Less:
Bruk Eksempel over for å laste mer eksempeldata.
Hva er CSS til Less?
Less er en CSS-forprosessor med variabler, nesting og mixins. Å konvertere vanlig CSS til Less omstrukturerer med nesting og forbereder Less-funksjoner. Verktøyet analyserer CSS-en din og gir Less-lignende struktur. W3C CSS-spesifikasjonene definerer kilden; Less definerer utdata.
Konvertering skjer helt i nettleseren din. Ingenting sendes til server. Utdata er gyldig Less. Omvendt (Less til CSS): Less til CSS. For SCSS: CSS til SCSS.
Slik bruker du verktøyet
Lim inn eller last opp CSS
Kopier CSS og lim inn i venstre editor. Du kan også klikke Last opp for en .css-fil. Eksempel laster eksempeldata. Ugyldig CSS viser feil.
Gjennomgå Less-utdata
Høyre panel viser konvertert Less. Selektorer kan nestes der strukturen tillater det. Du kan legge til variabler og mixins manuelt etter konvertering.
Kopier eller last ned
Bruk Kopier eller Last ned. Kompiler Less med Less til CSS for å verifisere. Formater CSS først med CSS-formaterer.
Når CSS til Less hjelper
Ved migrering fra vanlig CSS til Less, eller når du har CSS fra designeksport og vil integrere i Less-basert kodebase (f.eks. Bootstrap 3, Ant Design), gir konverteringen et utgangspunkt. webpack og Gulp kompilerer Less. Utdata gir nestet struktur du kan forbedre med variabler og mixins.
Designverktøy eksporterer ofte vanlig CSS. Konvertering til Less her lar deg legge det inn i komponentbasert struktur. For SCSS, bruk CSS til SCSS. For leverandørprefiks, CSS-prefiks.
Ofte stilte spørsmål
Legger det til variabler eller mixins?
Konvertereren fokuserer på struktur (nesting). Den trekker ikke automatisk gjentatte verdier til variabler. Legg til variabler og mixins manuelt etter behov.
Er dataene mine private?
Ja. Konvertering skjer helt i nettleseren din. Ingen data sendes til server.
Hvordan fungerer nesting?
Verktøyet utleder nesting fra selektorforhold (f.eks. .parent .child blir nestet). Komplekse selektorer kan forbli flate. Gjennomgå og juster.
Less vs SCSS?
Begge legger til variabler, nesting og mixins. Less brukes i Bootstrap 3, Ant Design. SCSS i Bootstrap 4+ og mange moderne rammeverk. Velg etter stacken din.
Kan jeg kompilere utdata?
Ja. Lim Less inn i Less til CSS for å kompilere og verifisere. Utdata bør matche den opprinnelige CSS-strukturen.
Relaterte verktøy
Less: lesscss.org. W3C CSS og MDN CSS definerer kildeformatet. Bootstrap. webpack. Figma.