Wofür LESS/SCSS-Compiler gedacht ist
Ein Stylesheet, das noch mit $-Variablen, geschachtelten Regeln und Mixins geschrieben ist, wird hier in ausführliches, browserschreitendes CSS aufgelöst. Zwischen LESS und SCSS wählen Sie per Schalter; der Elternselektoren-Verweis mit dem kaufmännischen Und und die Platzhalter eines Mixins werden dabei aufgelöst, als hätte es einen lokalen Build-Lauf gegeben.
Bedienung
- Legen Sie über den Schalter fest, ob es sich um LESS oder SCSS handelt.
- Fügen Sie Ihr Stylesheet mit Variablen und Verschachtelungen in das Feld ein.
- Starten Sie die Kompilierung; bei einem Fehler wird die betroffene Stelle genannt, sonst übernehmen Sie das CSS per Kopie.
Typische Anwendungen: Ein einzelnes Mixin oder eine Variable in der Hand testen, ohne dafür Node und einen Compiler zu installieren, Ein altes LESS-Schnipsel nachvollziehen, das noch mit Verschachtelung und Variablen schreibt, Eine kleine Stilprobe aus einem Tutorial in die tatsächlich lauffähigen Regeln übersetzen.
Fragen und Antworten
Was ist der Unterschied zwischen LESS und SCSS?
Beide erweitern CSS um Variablen und Verschachtelung. SCSS ist Teil von Sass und nutzt geschweifte Klammern; LESS ist eigenständig und ähnlich in der Syntax.
Läuft das wirklich ohne Server?
Ja. less.js und sass.js werden aus einem CDN geladen und kompilieren anschließend direkt in Ihrem Browser.
Werden @import-Dateien aufgelöst?
Nein. Es wird nur der direkt im Feld stehende Text kompiliert; externe Importe müssen Sie selbst einfügen.
Was passiert bei einem Syntaxfehler?
Der Compiler meldet die Fehlstelle, statt das Ergebnis auszugeben. Korrigieren Sie die Vorlage und kompilieren Sie erneut.
Einschränkungen
Die beiden Compiler laufen als Skript im Browser und werden beim ersten Einsatz aus einem Inhaltsnetzwerk nachgeladen – der erste Klick dauert deshalb einen Moment, später bleibt es im Zwischenspeicher. @import-Anweisungen innerhalb der Vorlage werden nicht nachgezogen; jede eingebundene Datei muss selbst eingefügt werden. Ohne Verbindung zum Laden der Bibliothek lässt sich nichts umwandeln, und es wird nur die eine eingefügte Vorlage verarbeitet, kein gesamtes Projekt.
Was das Werkzeug kann
Auswahl zwischen LESS und SCSS, Kompilierung vollständig im Browser, Fehlermeldungen werden direkt angezeigt, Ergebnis per Klick kopieren
Rund um CSS und Vorlagen: