LESS zu CSS
LESS online in CSS umwandeln: Variablen, Mixins und Verschachtelung mit dem offiziellen LESS-Compiler im Browser kompilieren.
LESS zu CSS kompiliert LESS-Code mit dem offiziellen LESS-Compiler direkt im Browser. Variablen, Mixins, Rechenoperationen, Farbfunktionen und verschachtelte Media Queries werden zu normalem CSS. Fehler erscheinen mit Zeile und Spalte, die Ausgabe ist lesbar oder minifiziert. Der Code wird nicht hochgeladen.
CSS
LESS kompilieren
Browser verstehen kein LESS. Ein Compiler setzt Variablen ein, löst Verschachtelungen auf, rechnet Operationen aus und kopiert Mixins an die Stelle ihres Aufrufs. Heraus kommt normales CSS.
| LESS | Wirkung |
|---|---|
@primary: #2563eb; | Variable |
.rounded(); | Mixin-Aufruf |
&-title | Selektor .card-title |
darken(@primary, 10%) | Farbfunktion |
@gap * 2 | Rechnung mit Einheit |
Normales CSS in LESS umwandeln kannst du mit CSS zu LESS, SCSS kompilieren mit SCSS zu CSS.
Häufige Fragen
Wie unterscheiden sich LESS und SCSS?
Beide erweitern CSS um Variablen, Verschachtelung und Mixins. LESS nutzt @ für Variablen und ruft Mixins wie Klassen auf, SCSS nutzt $ und @include. SCSS ist heute verbreiteter; LESS findet man vor allem in älteren Bootstrap- und Ant-Design-Projekten.
Warum steht die Division in Klammern?
Seit LESS 4 wird ein Schrägstrich nur in Klammern als Division ausgewertet, damit Schreibweisen wie font: 12px/1.5 unverändert bleiben. Schreibe also (@gap / 2) oder nutze ./.
Funktionieren @import und Plugins?
Importe anderer Dateien und LESS-Plugins sind im Browser nicht verfügbar. Alles, was du kompilieren willst, muss in der Eingabe stehen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.