Less-indata

Kompilerad CSS

Vad är Less till CSS?

Webbläsare förstår CSS, inte Less-syntax. Den här konverteraren omvandlar Less-kod till standard-CSS, så att du kan använda variabler, kapslingar och återanvändbara stilmönster medan du levererar webbläsarkompatibel utmatning.

Använd den när du vill ha snabb kompilering utan att konfigurera en byggpipeline. Allt körs lokalt i din webbläsare, så koden förblir privat och konverteringen sker omedelbart.

Hur man använder Less till CSS-konverteraren

Följ dessa steg för att kompilera Less till webbläsarredo CSS. Varje steg använder de faktiska knapparna och panelerna på den här sidan.

Klistra in, ladda upp eller läs in exempel

Klistra in Less i den vänstra panelen Less-indata eller klicka på Ladda upp för att läsa in en .less-fil. Klicka på Exempel för att se exempel på abonnentkortsstilar med variabler och mixins. Exempel på Less-indata:

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

Visa den kompilerade CSS

Den högra panelen Kompilerad CSS visar utmatningen direkt. Variabler löses, kapslingar plattas ut, mixins expanderas.

Kopiera eller ladda ner

Klicka på Kopiera för att kopiera till urklipp, eller Ladda ner för att spara som .css. Använd Rensa för att börja om. All kompilering sker i din webbläsare.

Relaterade CSS-verktyg

Kompilering är vanligtvis ett steg i ett stilarbetsflöde. Du kan också behöva: