[DE] LESS Dateien kompilieren

mit WinLess

 
OWS
Benutzer
Avatar
Geschlecht:
Herkunft: Niedersachsen
Homepage: oetjen-webservice.…
Beiträge: 305
Dabei seit: 03 / 2006
Betreff:

[DE] LESS Dateien kompilieren

 · 
Gepostet: 24.02.2017 - 20:44 Uhr  ·  #1
Mit dem CF4 kommen ja auch diverse .less Dateien die man, um ein eigenes Design umsetzen zu können, bearbeiten und kompilieren muss. Da das ganze auch für mich Neuland war, habe ich mich nach einer möglichst einfachen Lösung umgesehen wie man das ganze am besten hin bekommt. Meine Vorgehensweise möchte ich mit allen, die sich mit dem Designen des CF4 auseinander setzen möchten, gerne teilen.

Ich werde an dieser Stelle nicht darauf eingehen in welcher Datei man was findet oder welche korrekte Syntax für die CSS Anweisungen genutzt werden muss. Das sind Dinge die sich jeder Designer entweder selbst erarbeiten muss oder bereits schon weiß. Aber fangen wir mal mit einem geeigneten Programm an mit dem man .less Dateien kompilieren kann.

Auf meiner Suche nach einem Tool mit dem man .less dateien kompilieren kann, bin ich letztendlich bei WinLess gelandet. Das Programm erledigt alles so wie ich das für die Entwicklung eines Designs benötige. Runterladen kann man sich das Programm unter: http://winless.org (WinLess ist kostenlos nutzbar!)

Hat man das Programm runter geladen und installiert, geht es nach dem Start darum ein Verzeichnis festzulegen von dem eine oder mehrere .less Dateien kompiliert werden können. Auf einem der Screenshots im Anhang seht ihr den Startbildschirm von WinLess.Dort klickt ihr einfach unten den Button Add Folder und sucht das Verzechnis aus in dem sich die .less Dateien des CF4 befinden. In der Regel ist das der Ordner templates/mira/less. Dieser Ordner muss sich natürlich im entpackten Zustand auf eurem Rechner befinden!

Habt ihr den passenden Ordner ausgewählt lädt WinLess automatisch alle im gewählten Ordner vorhandenen .less Dateien in die Übersicht auf der rechten Seite. Da beim CF4 nur die global.less kompiliert werden muss, setzt ihr bitte auch nur dort einen Haken. Alle anderen Dateien wählt ihr einfach ab. In der Spalte output File auf der rechten Seite klickt ihr bitte einmal mit der rechten Maustaste in der Spalte der global.less.

Im aufpoppenden Menü wählt ihr bitte Select Output File. Im anschließenden Dialogfenster sucht ihr euch das Verzeichnis css im Ordner mira und klickt die dortige global.min.css an. Damit sagt ihr WinLess dass das kompilierte Endergbenis in der Datei templates/mira/css/global.min.css gespeichert werden soll.

Ihr könnt in den Einstellungen (File / Settings) von WinLess (siehe Screenshot) noch mal prüfen ob ein Haken bei minify by default gemacht ist. Wenn nicht, setzt dort bitte einen Haken. Alle anderen Punkte in der Konfiguration könnt ihr nach eurem Gusto wählen. Nun haben wir alle Einstellungen gemacht die zum Kompilieren und automatischer Generierung der global.min.css erforderlich sind.

Startet nun WinLess (muss bei der Bearbeitung der .less Dateien auch aktiv bleiben!) und öffnet mit einem geeigneten Editor ein der .less Dateien die ihr anpassen möchtet. Ein geeigneter Editor um die Dateien bearbeiten zu können ist zum Beispiel Notepad++.

Nun sucht ihr in der .less Datei die Passage die ihr ändern möchtet und speichert das Dokument ab. WinLess merkt das an der Datei im angegebenen Verzeichnis etwas geändert wurde und kompiliert die von euch zuvor gewählte global.less neu. Damit wird dann auch eine neue global.min.css erstellt die das CF4 benötigt.

Nun könnt ihr einfach die geänderten Dateien auf euren Webspace/Server oder in das lokale Verzeichnis (falls ihr z.B. XAMPP nutzt) hochladen und euer Forum aufrufen. Wenn ihr die von euch gemachten Änderungen nicht direkt seht, drückt bitte einmal Strg+F5 um die Seite komplett neu zu laden. Dann sollten eure Anpassungen auch sichtbar sein.

Im großen und ganzen ist das die Vorgehensweise um die beim CF4 vorhandenen .less dateien zu bearbeiten, zu kompilieren und eine passende global.min.css zu erhalten. Falls an dieser Stelle noch etwas unklar sein sollte, scheut euch nicht eure Fragen hier im Thread zu stellen. Ich versuche immer zeitnah zu antworten. Wenn bei mir natürlich andere Dinge Vorrang haben kann eine Antwort aber auch mal etwas dauern. Daher habt Verständnis wenn es mal etwas länger dauert.

Abschließend bleibt mir nur noch zu sagen das diese kurze Anleitung nur für Windows Benutzer gilt da es Winless nur für Windows gibt. Sollte euch WinLess gefallen dürft ihr auch gerne mal darüber nachdenken den Spendenbutton auf der WinLess Homepage zu nutzen. Der Autor freut sich sicher über eine kleine Wertschätzung seiner Arbeit.

Vielen Dank für eure Aufmerksamkeit und gutes Gelingen beim Kompilieren/Designen/Anpassen eures CF4...
Der an diesem Beitrag angefügte Anhang ist entweder nur im eingeloggten Zustand sichtbar oder die Berechtigung Deiner Benutzergruppe ist nicht ausreichend.
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: [TUTORIAL] LESS Dateien kompilieren

 · 
Gepostet: 24.02.2017 - 23:58 Uhr  ·  #2
OWS
Benutzer
Avatar
Geschlecht:
Herkunft: Niedersachsen
Homepage: oetjen-webservice.…
Beiträge: 305
Dabei seit: 03 / 2006
Betreff:

Re: [TUTORIAL] LESS Dateien kompilieren

 · 
Gepostet: 25.02.2017 - 00:22 Uhr  ·  #3
Gern geschehen. Vielleicht hilft ja dem einen oder anderen etwas weiter. :)
Douzeper
Benutzer
Avatar
Geschlecht:
Herkunft: Antrim, Northern Ireland
Alter: 55
Homepage: motorhomecraic.com
Beiträge: 555
Dabei seit: 10 / 2004
Betreff:

Re: [TUTORIAL] LESS Dateien kompilieren

 · 
Gepostet: 27.02.2017 - 15:07 Uhr  ·  #4
OWS
Benutzer
Avatar
Geschlecht:
Herkunft: Niedersachsen
Homepage: oetjen-webservice.…
Beiträge: 305
Dabei seit: 03 / 2006
Betreff:

Re: [TUTORIAL] LESS Dateien kompilieren

 · 
Gepostet: 27.02.2017 - 15:16 Uhr  ·  #5
You're welcome :)
Philipp51
Benutzer
Avatar
Geschlecht:
Alter: 73
Beiträge: 94
Dabei seit: 11 / 2014
Betreff:

Re: [DE] LESS Dateien kompilieren

 · 
Gepostet: 13.06.2018 - 17:29 Uhr  ·  #6
Wegen fehlender Schriften auf meinem System erhalte ich eine Fehlermeldung beim Compilieren der LESS-Dateien.

Nach der Anpassung auf

@cf_font_mono: "Consolas", "Courier New", fixed;

ist die Meldung weg.

Den Ordner shared hatte ich auf mein lokales System heruntergeladen.
Die fehlenden Schriften scheinen den Betrieb des CF4 nicht zu stören.
JMH
Benutzer
Avatar
Geschlecht: keine Angabe
Beiträge: 8
Dabei seit: 11 / 2018
Betreff:

Re: [DE] LESS Dateien kompilieren

 · 
Gepostet: 26.11.2018 - 23:35 Uhr  ·  #7
Thank you for this informative tutorial. What finally worked for me was to simply download the entire CF4 system file from my hosting to my desktop, then use that as the reference file in WINLESS. No more errors relating to fonts or other files it was looking for, and every edit was successful.

I still have a ton of more learning to do as I go, but I am starting to get the scope of the CF4 system and its many intertwining relationships within.
OWS
Benutzer
Avatar
Geschlecht:
Herkunft: Niedersachsen
Homepage: oetjen-webservice.…
Beiträge: 305
Dabei seit: 03 / 2006
Betreff:

Re: [DE] LESS Dateien kompilieren

 · 
Gepostet: 27.11.2018 - 10:12 Uhr  ·  #8
Thank you JMH. I am very happy that my tutorial helped you.
Gewählte Zitate für Mehrfachzitierung:   0

Registrierte in diesem Topic

Aktuell kein registrierter in diesem Bereich

Die Statistik zeigt, wer in den letzten 5 Minuten online war. Erneuerung alle 90 Sekunden.