Shopware Themes mit .less anpassen

Buntstifte

Shopware setzt zum Gestalten seiner Themes auf den populären CSS Pre-Processor .less. Mit .less ist es möglich die Defizite von CSS (fehlende Variablen, Konstanten, Funktionen und hierarchische Strukturen) weitgehend zu eliminieren und wesentlich produktiver zu arbeiten.

Was bedeutet das nun für das Anpassen von Shopware-Themes?

Immer .less statt .css modifizieren

Es liegt nahe für das Ändern des Designs einfach das entsprechende CSS File zu modifizieren oder ein zusätzliches CSS File hinzuzufügen um die bestehenden Regeln zu überladen.

Das kann allerdings zu Problemen führen, da die CSS Files beim Kompilieren des Themes überschrieben werden. Weiters verliert man dadurch alle Vorteile, die .less bietet.

Ein kleines Beispiel für die Vorzüge von .less:

@phoneLandscapeViewportWidth: 30em; // Zuweisen einer Variablen

// PHONE LANDSCAPE
@media screen and (min-width: @phoneLandscapeViewportWidth)  {...}

// PHONE
@media screen and (max-width: (@phoneLandscapeViewportWidth - 1) {...}

Variablen können bequem (global) definiert und in allen zusammenhängenden .less Files genützt werden. Weiters sind auch mathematische Berechnungen innerhalb der .less Datei möglich, wie man hier beispielhaft an der Abgrenzung über den Media-Query bei der Viewport-Breite sieht.

.less kann noch wesentlich mehr (mixins…), dass soll allerdings nicht Teil dieses Tutorials sein. Eine ausführliche Dokumentation findest Du hier: http://lesscss.org/

Wie kann man .less Files zu .css Files kompilieren?

Diese Arbeit übernimmt in diesem Fall Shopware für Dich. Sobald Du den Cache über das Backend leerst und das Theme neu kompilierst, werden auch die CSS Files neu kompiliert.

Sollte es einmal nötig sein die .less Files unabhängig von der Shopware-Installation zu kompilieren, kann ich das Tool Koala empfehlen.

Stuktur und Überladen der .less Files

Solltest Du Dein Theme über die .less / CSS Dateien adaptieren wollen ist es unumgänglich, dass Du Dir die detaillierte Dokumentation zu diesem Thema durchliest.

Shopware stellt zu diesem Thema eine umfangreiche Dokumentation im Designer´s Guide zur Verfügung, den Du hier findest: https://developers.shopware.com/designers-guide/less/

1 Kommentar

In diesem Beitrag kannst Du Kommentare verfassen.

Kommentar verfassen

Folge mir auf Twitter

Hol Dir kostenlos Tipps und Tricks zu Shopware, E-Commerce und andere Open-Source Produkte.

Folge @synonymousrocks