Tag Archives: SCSS


Mit dem Gambio StyleEdit 3 ein indvividuelles Shopdesign erstellen - Teil 2: Das CSS

StyleEdit 3-Tutorials (Teil 2): Variablen, SCSS-Funktionen und Mixins

Nachdem wir im letzten Artikel zum Thema StyleEdit 3 die wichtigsten Begriffe geklärt haben, wird es heute ein wenig technischer. Da sich dieser Artikel auf den vorherigen bezieht, empfehle ich, diesen vorab zu lesen.

Wie bereits im letzten Artikel angesprochen verwenden wir im Honeygrid-Template die Technologie – oder besser das Gerüst – “Bootstrap” und haben so die Möglichkeit auf sogenannte CSS-Präprozessoren zurückzugreifen, welche die gestalterischen Aufgaben erheblich erleichtern können. Ein Präprozessor kann Aufgaben erledigen, bevor es um die eigentliche Arbeit geht.

In unserem Fall bedeutet das, dass der Präprozessor schon etwas “Mathe machen” und Styles aus Einzelteilen zu einem Gesamten zusammensetzen kann, bevor wir diesen das erste Mal ausliefern. Er kann auch, wenn irgendwo tief in den Styles z.B. steht “benutze hier die Hintergrundfarbe” oder “verwende die Breite des Hauptinhalts”, diese an der entsprechenden Stellen auslesen und dann passend einsetzen.

Um wiederkehrende Werte für Farben, Höhen, Breiten und Abstände nicht jedes Mal neu schreiben zu müssen und den Aufwand zu minimieren, sollte sich an diesen Werten einmal etwas ändern, verwenden wir zahlreiche Variablen, in denen die benötigten Werte hinterlegt sind. Diese Variablen werden anschließend erst beim Erstellen des final ausgelieferten CSS in die richtigen Werte übersetzt.

Continue reading