Less naar CSS — online compiler — Numio
Compileer Less naar CSS in je browser. De officiële less.js-compiler zet variabelen, geneste regels, mixins en berekeningen om naar gewone CSS, zodat je de uitvoer zonder installatie van lessc kunt bekijken.
Controleer welke CSS Less-variabelen, geneste regels en mixins opleveren.
Less
CSS
Wanneer gebruik je dit?
- Controleer welke CSS Less-variabelen, geneste regels en mixins opleveren.
- Converteer een klein Less-bestand voor een project dat gewone CSS gebruikt.
Hoe werkt het
- Plak Less-code of open een .less-bestand.
- Kies de instelling voor leveranciersprefixen passend bij de browsers die je wilt ondersteunen.
- Controleer de gegenereerde CSS en kopieer deze.
Less-invoer
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}CSS-uitvoer
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Details en beperkingen
Een ongedefinieerde variabele of een niet-gesloten haakje stopt de compilatie. Begin met een kort fragment om een fout op te sporen.
De compilatie vindt plaats in je browser. Een @import van een externe URL kan de browser die bron laten ophalen. Gebruik daarom bij voorkeur zelfstandige code.
Imports van andere lokale bestanden, Less-plugins en projectspecifieke compileropties zijn niet beschikbaar. De leveranciersprefixen hangen af van de ingestelde doelbrowsers.
FAQ
Is dit hetzelfde als compileren met lessc?
De tool gebruikt less.js, dezelfde compiler als lessc. Een zelfstandig bestand levert met standaardopties dus dezelfde CSS op. Projectfuncties zoals lokale imports en plugins zijn hier niet beschikbaar.
Kan ik een bestand met @import compileren?
Imports die naar andere bestanden op je computer verwijzen, kunnen niet in de browser worden opgehaald. Plak de geïmporteerde code in hetzelfde bestand of compileer het hele project met lessc.
Wat is het verschil tussen Less en CSS?
Less is een CSS-preprocessor. Het voegt variabelen, geneste regels, mixins en functies toe en moet naar CSS worden gecompileerd voordat een browser het kan gebruiken.