Less-inndata

Kompilert CSS

Hva er Less til CSS?

Nettlesere forstår CSS, ikke Less-syntaks. Denne konvertereren omgjør Less-kode til standard-CSS, slik at du kan bruke variabler, nesting og gjenbrukbare stilmønstre mens du leverer nettleserkompatibel utdata.

Bruk den når du vil ha rask kompilering uten å konfigurere en byggepipeline. Alt kjører lokalt i nettleseren din, så koden forblir privat og konverteringen skjer umiddelbart.

Slik bruker du Less til CSS-konvertereren

Følg disse trinnene for å kompilere Less til nettleserklar CSS. Hvert trinn bruker de faktiske knappene og panelene på denne siden.

Lim inn, last opp eller last inn eksempel

Lim inn Less i det venstre panelet Less-inndata eller klikk på Last opp for å laste inn en .less-fil. Klikk på Eksempel for å se eksempel på abonnentkort-stiler med variabler og mixins. Eksempel på Less-inndata:

@primary: #2563eb;
@spacing: 12px;
.subscriber-card {
  padding: @spacing;
  .plan-badge { color: @primary; font-weight: 700; }
  &:hover { background: #eef2ff; }
}

Se den kompilerte CSS-en

Det høyre panelet Kompilert CSS viser utdataen umiddelbart. Variabler løses, nesting flates ut, mixins utvides.

Kopier eller last ned

Klikk på Kopier for å kopiere til utklippstavlen, eller Last ned for å lagre som .css. Bruk Tøm for å starte på nytt. All kompilering skjer i nettleseren din.

Relaterte CSS-verktøy

Kompilering er vanligvis ett trinn i en stilarbeidsflyt. Du kan også trenge: