SASS und LESS unter Windows zu CSS umwandeln mit Koala (Auch Minifizierungen)
Artikel ist obsolet/antiquiert!
Immer öfter lädt man auf GitHub Pakete herunter, die nicht direkt einsatzbereit sind; z.B. fehlen CSS-Dateien. Stattdessen liegen den Paketen SASS- oder LESS-Dateien bei, die man wiederholt via Konsole kompilieren muss, will man sie nach eigenen Wünschen anpassen und testen. Passt meist gar nicht in meinen Arbeitsablauf, weshalb ich oftmals Tools wie das Open-Source-Programm Koala von Ethan Lai nutze.
Leider hat der Koala-Programmierer in 2020 bekanntgegeben, dass er die Arbeit an diesem Programm beendet hat. Es hat mittlerweile zahlreiche Bugs. Als Alternaive kann man Prepros verwenden (Siehe dort Überschrift "Alternative: Prepros für Windows/Linux/MacOS").
Man findet das Koala-Programm unter http://koala-app.com/. Die Installation unter Windows Version 10 dauerte unter einer Minute, obwohl ein sehr großes Paket, da auch Ruby mitinstalliert wird.
Nach dem Öffnen ging ich erst mal in die Einstellungen (Zahnrad), stellte Deutsch als Sprache ein, nicht mehr, und öffnete das Programm erneut.
Ich hatte einen Ordner voller SASS-Dateien (*.scss). Den zog ich tapfer in das Fenster, ohne zuvor irgendeine Anleitung gelesen zu haben.
Während ich noch den Button für's Kompilieren suchte, war das Ding schon fertig. Im selben Ordner, in dem der SASS-Ordner lag, wurde automatisch ein CSS-Ordner angelegt, in dem sich alle kompilierten Dateien befanden. Zwar auch *.map-Dateien, aber die sind ja schnell gelöscht und lässt sich selbstredend in den Einstellungen auch unterbinden.
Versehentlich befand sich im SASS-Ordner eine verirrte CSS-Datei. Die wurde mir minifiziert. Aus Datei shCoreEclipse.css wurde eine zusätzliche shCoreEclipse.min.css. Allerdings im SASS-Ordner. Minifizieren kann Koala also auch.
Etwas verunsichert, was mit Ordnern passiert, die zuvor schon angelegt und befüllt waren, also dem zuvor neu angelegten Ordner /css/, legte ich durch Klick auf das +-Symbol ein weiteres Projekt an. War einfach eine Kopie des SASS-Ordners im selben Ordner wie der alte.
Schwuppdiwupp wurden die CSS-Dateien erzeugt, aber diesmal direkt im neuen SASS-Ordner. Kein Problem also. Alter Ordner blieb unberührt.
Mehr wollte ich gar nicht.
Nächster Versuch. Jetzt wäre es noch schön, die erzeugten CSS-Dateien auch zu minifizieren (komprimieren). Man kann ein neues Projekt anlegen, den CSS-Ordner wählen, markiert alle Dateien in Koala und startet mit rechter Maus die Komprimierung. Will ich so aber nicht, da alle Dateinamen ein .min im Projektordner hinzubekommen, damit die Originale erhalten bleiben.
Also lege ich einen neuen Ordner unter Windows an. Nenne ich mal /mini/. Im Koala-Projekt markiere ich alle(!) CSS-Dateien mit STRG+A, klicke mit der rechten Maus auf die markierten Datein, wähle unter Ausgabepfad bestimmen den Ordner /mini/, starte mit Rechtsklick die Kompilierung für alle markierten Dateien und wunderbar, habe alle minifizierten Dateien mit Originaldateinamen im neuen Ordner.
Viel Spaß beim weiteren Rumexperimentieren. Da geht weitaus mehr mit Koala! Natürlich kann man das Auto-Kompilieren per Einstellungen auch deaktivieren oder einzelne Dateien per Rechtsklick kompilieren.