Es ist noch gar nicht lange her, da konnte ich mir nicht vorstellen, mit einem Preprozessor wie LESS zu arbeiten. Aber inzwischen bin ich auf den Geschmack gekommen.

Was LESS ist habe ich in diesem Artikel erklärt. Im Prinzip ist es eine Erweiterung der CSS-Syntax. LESS bietet das, was man sich von der nächsten CSS-Version wünschen würde: Man kann wiederverwendbare Variablen definieren, Styles verschachteln und Vieles mehr.

Der Haken dabei: Die Syntax von LESS muss per Compiler in CSS umgeschrieben werden, denn sonst kann der Browser die Angaben nicht lesen. Das heisst, wer daran gewöhnt ist, Anpassungen und Korrekturen in der CSS-Datei per FTP auf dem Server zu machen, muss sich umorientieren. Denn das funktioniert dann nicht mehr.

Änderungen macht man ausschließlich im less-File, die CSS-Datei ist nur noch eine Art Ausgabeformat, das automatisch erzeugt wird. Die CSS-Datei fasst man gar nicht mehr an.
Weiterlesen →

SASS und LESS sind Erweiterungen der klassischen CSS-Syntax, die CSS-Vielschreibern lästige Tipparbeit ersparen sollen. Mit SASS und LESS wird CSS smarter und leistungsfähiger.

Ich möchte in diesem Artikel herausfinden, welche Konsequenzen das Arbeiten mit CSS-Dateien, die einen Compiler brauchen, auf meinen Arbeitsablauf bei der Entwicklung von WordPress-Themes haben würde.
Eine Warnung vorweg: In diesem Artikel werde ich LESS und SASS fröhlich in einen Topf werfen. Das Prinzip dahinter ist dasselbe, aber mir ist klar, dass sich beide Ansätze voneinander unterscheiden. Eine Gegenüberstellung beider Methoden gibt es bei smashingmagazine.

Eine kurze Einführung in LESS

Die Syntax von LESS (und SASS) unterscheidet sich von der im klassischen CSS. Das muss auch so sein, schließlich bieten die Frameworks Funktionen, die es in CSS nicht gibt und die müssen irgendwie dargestellt werden.

Ein Beispiel: Ich möchte ein bestimmtes Rot definieren, die Hausfarbe der Firma, der die Website gehört. Der Hexcode der Farbe ist: #990000.

Dieses Rot soll auf der Website in verschiedenen Elementen vorkommen. Es gibt rote Überschriften, rote Linien und rote Flächen. Im klassischen CSS bleibt mir nichts anderes übrig, als überall dort, wo das Rot auftauchen soll, den Hexcode der Farbe einzutippen.
Ein Schriftelement bekommt eine color: #990000, eine Fläche eine background-color: #990000 und ein Rahmen die border-color:#990000 und so weiter. Weiterlesen →