Less-invoer

Gecompileerde CSS

Less naar CSS voorbeelden

Less-variabelen, mixins en nesting compileren naar platte CSS. Voorbeeld:

Variabelen, mixins en geneste selectors

Less-invoer:

Invoer

Gecompileerde CSS:

Uitvoer

Gebruik Voorbeeld hierboven om meer voorbeeldgegevens te laden.

Wat is Less naar CSS?

Less is een CSS-preprocessor die variabelen, nesting, mixins en functies toevoegt. Browsers draaien geen Less—ze hebben platte CSS nodig. Dit hulpmiddel compileert uw Less naar browserklare CSS. De Less-documentatie definieert de syntaxis.

Compilatie draait volledig in uw browser. Er wordt niets naar een server gestuurd. De uitvoer is standaard CSS. Voor de omgekeerde richting (CSS naar Less) gebruikt u CSS naar Less. Voor SCSS SCSS naar CSS.

Hoe dit hulpmiddel te gebruiken

Plak of upload Less

Kopieer uw Less en plak het in de linker editor. U kunt ook op Uploaden klikken om een .less- of .css-bestand te laden. De knop Voorbeeld laadt voorbeeldgegevens. Ongeldige Less toont een fout.

Bekijk de gecompileerde CSS

Het rechterpaneel toont de gecompileerde CSS. Variabelen worden opgelost, nesting wordt afgevlakt en mixins worden uitgebreid. De uitvoer is platte CSS die elke browser kan gebruiken.

Kopiëren of downloaden

Gebruik Kopiëren of Downloaden. Voor formatteren van de uitvoer de CSS Formatter. Voor minificeren de CSS Minificeerder.

Wanneer Less naar CSS helpt

Wanneer u Less hebt van een project (bijv. Bootstrap 3, Ant Design) of legacy-codebase maar platte CSS nodig hebt—voor een snelle test, CDN-deployment of systeem zonder build-tools—helpt deze compilatie. Ook nuttig voor debuggen: zie precies welke CSS uw Less produceert.

Less wordt gebruikt door veel oudere projecten en sommige UI-frameworks. Als u variabelen aanpast of styles extraheert, geeft compileren hier u de uiteindelijke CSS. Voor bestaande CSS converteren naar Less-structuur gebruikt u CSS naar Less.

Veelgestelde vragen

Less vs SCSS?

Beide voegen variabelen, nesting en mixins toe. Less gebruikt & voor parent-selectors; SCSS ook. De syntaxis verschilt licht. Kies op basis van uw project.

Ondersteunt het @import?

Imports worden mogelijk niet opgelost als bestanden niet zijn geüpload. Voor multi-file projecten gebruikt u de officiële Less-compiler of uw bundler.

Zijn mijn gegevens privé?

Ja. Compilatie draait volledig in uw browser. Er worden geen gegevens naar een server gestuurd.

Hoe zit het met mixins en functies?

Mixins en ingebouwde functies (bijv. lighten(), darken()) worden uitgebreid tijdens compilatie. De uitvoer-CSS bevat de opgeloste waarden.

Kan ik het gebruiken met Bootstrap 3?

Bootstrap 3 gebruikt Less. Voor volledige Bootstrap-compilatie gebruikt u de officiële build. Dit hulpmiddel werkt voor single-file Less of snippets.

Gerelateerde hulpmiddelen

Voor Less: lesscss.org en Less-gebruik. MDN CSS en W3C CSS definiëren het uitvoerformaat.

Less naar CSS Converter