[HowTo] Less CSS Programmierung

So Ihr Lieben,
Nachdem dieses Forum mir so oft geholfen hat, werde ich einen Beitrag zum Thema CSS/Less beisteuern.

Less ist eine Art CSS-Programmierung. Variablen, sind genauso, wie komplizierte Verschachtelungen möglich.
Damit wird der CSS-Code lesbarer und übersichtlicher.
Für Leute, die viel selbst programmieren eine echte Erleichterung.

Alle erforderlichen Infos/Syntaxbeispiele findet Ihr unter:
http://lesscss.org/

Kurzablauf:

1. Modul installieren
2. Modul aktivieren
3. CSS-Einträge in .info umbenennen *.css --> *.less
4. CSS-Dateien im Ordner auf dem Server umbenennen *.css --> *.less
5. Syntax lernen / Kreativ sind / Spass haben

Ausführlich:

1. Zuallererst downloaden und installieren wir das passende Modul: http://drupal.org/project/less. Hier finden wir erste Kurzinfos in Englisch. Ist jedoch leicht verständlich.
2. Aktivieren wir das Modul wie bei Drupal üblich.
3. Im Themes Ordner befindet sich die .info Datei, die genauso benannt ist wie das Theme. Also heisst das Theme: Maroon, dann heisst die Info-Datei maroon.info. In dieser Datei werden alle .css in .less umbenannt. Selbstverständlich müssen nicht alle CSS umbenannt werden. Jeder macht das so wie er möchte. Alle nicht umbenannten CSS-Dateien funktionieren ebenfalls wie gewohnt.

Beispiel: stylesheets[all][] = css/frontpage.css wird zu stylesheets[all][] = css/frontpage.less

4. Alle entsprechenden CSS-Dateien im Themes/CSS/Ordner selbst umbenennen. Hierzu verwendet ihr ein FTP-Programm oder ein Editor eures Vertrauens. Da ich ausschliesslich mit Linux arbeite, empfehle ich: Filezilla - http://www.filezilla.de und Komodo Edit die Free-Version - http://www.activestate.com/komodo-edit/downloads Diese sind auch für Windows-OS verfügbar.
5. Allerdings wie bereits gesagt: Jeder verwendet sein eigenes präferiertes Programm.

Nun könnt ihr mit einem externen Editor wie zum Beispiel Komodo Edit die entsprechende Less-Datei direkt online bearbeiten.
Nach Bearbeitung müssen (zumindest in meinem System) die Less-Dateien geflushed werden "/admin/settings/less" . Dann ist die geänderte Less-Datei als geänderte CSS-Datei verfügbar.

Vorteile:

• Zeilenkommentare sind in der kompilierten CSS-Datei nicht mehr sichtbar.
• Ausgabe ist strukturiert
• Tiefe Verschachtelungen lassen sich sehr einfach realisieren
• Code wird übersichtlicher
• Importfunktion
• Variablen
• Variablenberechnungen

Auf die Import/Variablen-Funktion gehe ich noch kurz ein.
Der Vorteil hier liegt in der einmaligen Definition von zum Beispiel Standardfarben und Standardabstände in einer speziellen Datei.
Beispiel:
Ich lege eine Datei lib.less an (Name ist frei wählbar).
In dieser Datei befinden sich folgende Einträge:

Die lib.less wird mit dem Befehl: @import "lib.less"; am Beginn jeder gewünschten CSS-Datei angehängt. Ab dann stehen die Definitionen zur Verfügung.
Ich verwende nun überall wo ich es benötige, die Variablen in meinem Code und muss nicht ständig über Hex-Nummern für Farben nachschauen.

Oder weiteres Beispiel:
Ich benenne eine Basis-Farbe, eine Borderfarbe, eine Hintergrundfarbe, Footerfarbe und kann dann über Variablenberechnung meine Seite schnell in verschiedenen Farben anschauen.
Detallierte Besipiele sind auf der Original-Seite aufgeführt (siehe oben)
Die Möglichkeiten sind jedenfalls vielfältig. Auch hier gilt der Grundsatz: Be creative.

In diesem Sinne ...