Vor einigen Wochen habe ich lesscss kennengelernt und seit dem nutzte ich es für fast alle Projekte die ich mache.
Was ist lesscss?
LESS erweitert CSS mit dynamischem Verhalten wie Variablen, Mixins, Berechnungen und Funktionen. Less läuft sowohl Client-seitig als auch Server-seitig.
Warum lesscss?
Vielleicht kenn Ihr das? Ihr seit fast fertig mit einem Projekt und dann wollt ihr einen Blauton, den ihr auf der ganzen Seite verwendet, in ein anderen Blauton ändern. Ihr sucht also eure ganze CSS-Datei durch, bzw. nutzt suchen & ersetzen. Wäre es nicht einfacher den Farbcode nur an einer einzigen Stelle zu ändern? Oder ihr ändert die Breite eurer Seite und müsst dann alle anderen Breiten auch noch anpassen? Einen weiterer Vorteil, wie ich finde, ist das Verschachteln von CSS Anweisungen.
Mit LESS kann man das ganz einfach umsetzten.
Beispiel:
/* Farben definieren */ @blau:#0000ff; @rot:#ff0000; /* Pixel definieren */ @seitenbreite:1000px; @inhalt_margin:25px; @inhalt_breite:@seitenbreite - @inhalt_margin * 2; /* klar geht das auch in %, aber es ist nur ein Beispiel */ /* Funktionen definieren */ .shadow(@a:0,@b:0,@c:0,@d:0,@f:#fff) { -moz-box-shadow:@arguments; -webkit-box-shadow:@arguments; box-shadow:@arguments; } /* CSS */ #seite { width:@seitenbreite; /* ja man kann css verschachteln */ #inhalt { width:@inhalt_breite; margin: 0 @inhalt_margin; background-color:@rot; color:@blau; .shadow(4px,3px,4px,5px,#666666); } } /* Ausgabe: */ #seite { width:1000px } #seite #inhalt { width:950px; margin: 0 25px; background-color:#ff0000; color:#0000ff; }
Das ist nur ein kleines Beispiel.
Ich mache es zusätzlich so, dass ich alle Konfiguration und Funktionen in andere CSS-Dateien auslagere. So kann ich meine Funktionen.less in allen Projekten benutzten ohne sie extra nochmal rauszukopieren. Ich habe eine CSS-Datei für Fonts, Farben und eine für Funktionen.
Wie man anhand des Beispiels sieht, kann man einfach den Wert von @blau ändern und es wird in alle Klassen übernommen.
Dies war ein kleiner Einblick in lesscss