LESS in CSS konvertieren Online
LESS-Code direkt im Browser in einfaches CSS kompilieren. Kein npm, kein Node.js, kein Setup.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}LESS-zu-CSS-Compiler
Warum diesen LESS-Compiler verwenden?
Keine Konfiguration noetig
Kein npm, kein webpack, kein Grunt. LESS-Code einfuegen und sofort CSS erhalten.
Offizielles less.js
Verwendet den offiziellen less.js-Compiler. Maximale Kompatibilitaet mit dem LESS-Standard.
Volle Privatsphaere
Dein LESS-Code wird nie an irgendeinen Server gesendet. Alles laeuft in deinem Browser.
Bootstrap-3-Projekte
Bootstrap-3-Themes und andere LESS-basierte Legacy-Projekte einfach kompilieren.
So funktioniert es
Drei Schritte, kein Aufwand
LESS-Code einfuegen
Schreibe oder fuege deinen LESS-Code in den Editor ein. @-Variablen, Verschachtelung, Mixins und mathematische Operationen werden unterstuetzt.
Sofortige Kompilierung
Das resultierende CSS erscheint automatisch. Der LESS.js-Compiler laeuft lokal in deinem Browser.
CSS kopieren oder herunterladen
Kopiere das CSS in die Zwischenablage oder lade es als fertige .css-Datei herunter.
FAQ
Noch Fragen?
LESS (2009 von Alexis Sellier erstellt) und SCSS (Teil von Sass, 2006 erstellt) sind CSS-Praeprozessoren mit unterschiedlichen Philosophien. Der augenfaelligste Unterschied ist die Variablensyntax: LESS verwendet @ (dasselbe Praefix wie CSS-At-Regeln wie @media, was zu Verwirrung fuehren kann), waehrend SCSS $ verwendet. LESS wurde so konzipiert, dass es sowohl im Browser (ueber less.js) als auch auf dem Server verarbeitet werden kann. SCSS hat ein reicheres Oekosystem (Compass, Bootstrap 4+, Angular) und den offiziellen Dart-Sass-Compiler. LESS bleibt hauptsaechlich aufgrund der Legacy-Projektbasis relevant, die Bootstrap 3 verwendete.
LESS-Variablen werden mit @name: Wert; definiert und direkt verwendet: @base-color: #4d90fe; color: @base-color. Eine Besonderheit von LESS ist die verzoegerte Auswertung (lazy evaluation): Variablen koennen vor ihrer Deklaration im selben Geltungsbereich verwendet werden, da LESS die gesamte Datei vor dem Aufloesen von Werten verarbeitet. Im Gegensatz dazu folgen SCSS-Variablen einer strengeren Deklarationsreihenfolge. LESS-Variablen koennen auch in Selektoren und Eigenschaftsnamen mit der @{name}-Syntax interpoliert werden.
LESS-Mixins werden als regulaere CSS-Klassen definiert und mit derselben Syntax aufgerufen: .mixin() definiert das Mixin, und das Aufrufen von .mixin() innerhalb einer anderen Regel schliiesst es ein. Es gibt kein @mixin-Schluesselwort wie in SCSS. Das bedeutet, dass jede bestehende CSS-Klasse als Mixin verwendet werden kann. Parametrisierte Mixins verwenden die Syntax .mixin(@param: Standardwert). LESS unterstuetzt auch Mixin-Guards: .mixin(@a) when (@a > 10) { ... } fuer bedingte Kompilierung.
Nein. Bootstrap 3 (2013) war der Moment der massiven Verbreitung von LESS. Bootstrap 4 (2018) migrierte vollstaendig zu SCSS (Sass), und Bootstrap 5 (2021) setzte dies fort. Diese Migration war einer der Faktoren, die SCSS als dominanten Praeprozessor im modernen Oekosystem festigten. Wenn du ein Legacy-Projekt mit Bootstrap 3 hast, kann dieses Tool dir helfen, kompiliertes CSS zu extrahieren, ohne eine LESS-Kompilierungsumgebung pflegen zu muessen.
Das Tool kompiliert den bereitgestellten LESS-Code direkt, kann jedoch keine Verweise auf externe Dateien ueber @import aufloesen, da es im Browser ohne Dateisystemzugriff arbeitet. Wenn du mehrere LESS-Dateien hast, kannst du diese manuell vor der Kompilierung zusammenfuehren. Fuer Projekte mit komplexer modularer Struktur ist eine lokale Kompilierungsumgebung mit less.js oder LESS-Integration in deinem Bundler erforderlich.
LESS wird noch in drei Hauptkontexten benoetigt: Pflege von Legacy-Projekten mit Bootstrap 3 oder WordPress/Magento/Drupal-Themes, die LESS verwenden; Extrahieren von CSS aus LESS-Snippets in ererbtem Code fuer die Migration zu nativem CSS oder SCSS; und Erlernen der LESS-Syntax fuer die Arbeit an bestehenden Code-Basen. Fuer neue Projekte ist die aktuelle Empfehlung SCSS/Sass oder direkt modernes CSS mit Custom Properties und @layer.
LESS online in CSS kompilieren: ohne npm oder Node.js, ideal fuer Bootstrap-3-Projekte
LESS ist eine CSS-Vorverarbeitungssprache, die von Alexis Sellier (online bekannt als 'cloudhead') entwickelt und 2009 als Open-Source-Software unter der Apache-Lizenz veroeffentlicht wurde. Sellier schrieb sie urspruenglich in Ruby, aber die Neufassung in JavaScript (less.js) im Jahr 2010 war der Moment, der ihre Popularitaet bestimmte: Ein CSS-Praeprozessor konnte zum ersten Mal direkt im Browser ausgefuehrt werden, indem die .less-Datei und die less.js-Bibliothek ueber ein Script-Tag geladen wurden. Diese Faehigkeit zur clientseitigen Kompilierung demokratisierte den Zugang zur CSS-Vorverarbeitung ohne Build-Infrastruktur. Die wichtigsten LESS-Funktionen sind: direkte CSS-Vererbung, @-Praefix-Variablen, Selektorverschachtelung, aufrufbare Mixins (.mixin()), direkte Arithmetik auf Werten (margin: @base * 2) und integrierte Farbfunktionen (lighten, darken, mix usw.).
Der groesste Einfluss von LESS auf das Web-Oekosystem kam ueber Bootstrap, das weltweit beliebteste UI-Framework. Bootstrap 2 (2012) und Bootstrap 3 (August 2013) verwendeten LESS als ihr Anpassungs- und Kompilierungssystem und exponierten Millionen von Webentwicklern der LESS-Syntax. Die Entscheidung von Bootstrap 4 (stabile Version Januar 2018) zur Migration zu SCSS war der entscheidende Wendepunkt: Neue Projekte wechselten zu SCSS, und LESS wurde hauptsaechlich mit der Pflege von Legacy-Projekten assoziiert.
Der Bedarf nach einem Online-LESS-Compiler konzentriert sich hauptsaechlich auf drei Wartungs- und Migrationsszenarien. Das erste ist das Bootstrap-3-Legacy-Oekosystem: Obwohl Bootstrap 5 seit Jahren verfuegbar ist, verwenden viele Unternehmensanwendungen und WordPress-Sites noch Bootstrap-3-basierte Themes mit LESS-Anpassungen. Wenn kompiliertes CSS aus einem bestimmten Snippet extrahiert oder das Ergebnis einer Variable ueberprueft werden muss, ist der Online-Weg schneller als die Pflege einer Kompilierungsumgebung. Das zweite Szenario ist die Migration von LESS zu SCSS oder modernem CSS. Das dritte betrifft die Pflege von Magento-Themes (die LESS im Magento-2-Theming-System intensiv verwenden) und bestimmten Drupal-Themes. Convertir.ai fuehrt den offiziellen less.js-Compiler in deinem Browser aus, ohne Code an externe Server zu senden.