Webseiten und ZubehörProgrammierung UmsetzungPflege Backups BetreuungJoomla-Spezialist

SonstigeSchnipsel

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 erst kompilieren muss. Klar kann man auch Windows nachrüsten und das mit Konsolebefehlen bewerkstelligen. Aber richtig ruckizucki gehts mit dem Open-Source-Programm Koala von Ethan Lai.

Man findet es unter http://koala-app.com/. Die Installation unter Windows 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.

Koala-Oberfläche: Drag & Drop um das erste Projekt anzulegen. Das Programm legt gleich los.
Koala-Oberfläche: Drag & Drop um das erste Projekt anzulegen. Das Programm legt gleich los.

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 css-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.

CSS LESS Tutorial SASS