Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Tipps & Tricks ›

[HowTo] Less CSS Programmierung

Eingetragen von Taranis (137)
am 17.02.2011 - 13:16 Uhr in
  • Tipps & Tricks
  • Drupal 6.x

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.
  4. Beispiel: stylesheets[all][] = css/frontpage.css wird zu stylesheets[all][] = css/frontpage.less

  5. 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.
  6. 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:

// Colours
@black: #000000;
@white: #FFFFFF;
@red: #FF0000;

// Borders
@border-std: 1px;

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

‹ Flash-Banner anzeigen [gelöst] Ubercart - Produkt nur einmal in Warenkorb hinzufügen ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Image Alt unD Image Titel
  • Probleme mit der darstellun der ogg:image Tags.
  • Drupal-Forks und ihre Schwächen/Stärken
  • Wie erlaubt man neuen Benutzern auf die Resetseite zugreifen zu dürfen.
  • Lokale Entwicklungsumgebung auf Windows
  • [gelöst]Abhängigkeiten zweier oder mehrerer Inhaltstypen
  • Drupalcenter tot?
  • Was kann ich gegen ständige Blutergüsse tun?
  • Mir gefällt die Drupal Symfony und deren Composer
  • Mir ist da was aufgefallen ;)
  • Matomo Installation
  • Verständnisfrage private_files in Drupal
Weiter

Neue Kommentare

  • Also bei mir bleibt da nix
    vor 21 Stunden 34 Minuten
  • Auch wenn deine Antwort nun
    vor 22 Stunden 38 Minuten
  • ich verwende 10.5.1
    vor 1 Tag 18 Stunden
  • sorry *g* vor lauter lauter
    vor 1 Tag 18 Stunden
  • Also der Token gehört schon
    vor 1 Tag 18 Stunden
  • nur die Erstinstallation
    vor 1 Tag 19 Stunden
  • Hm... Ich habe jetzt mal den
    vor 1 Tag 19 Stunden
  • Nicht nur Sicherheit, sondern auch Integrität Daten wichtig
    vor 1 Tag 19 Stunden
  • Ach was dass funktioniert
    vor 1 Tag 21 Stunden
  • Danke für die ausführliche
    vor 1 Tag 23 Stunden

Statistik

Beiträge im Forum: 250060
Registrierte User: 20368

Neue User:

  • RenhMen
  • Aspenflum
  • LilliNELP

» Alle User anzeigen

User nach Punkten sortiert:
wla9456
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3855
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 8 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association