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

06. September 2017

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.

Wir bemühen uns, möglichst viele dieser Variablen im StyleEdit 3 einseh- und veränderbar  zu machen. Einige Variablen haben dabei etwas technische Namen und können so für Verwirrung sorgen, da nicht jeder sofort weiß, was mit den jeweiligen Variablen gemeint sein könnte.

Um hier Klarheit zu schaffen, möchte ich in diesem Artikel einmal die wichtigsten Variablen auflisten und beschreiben, für was sie genutzt werden. Hierbei finden sich auch einige Variablen, die nicht direkt im StyleEdit 3 sichtbar sind, aber wichtig für das Verständnis davon sind, wie das Template intern arbeitet.

Damit der Beitrag nicht in eine simple Auflistung aller Variablen mit kurzer Erklärung ausartet, und um die Übersichtlichkeit zu wahren, versuche ich das Ganze ein wenig in Bereiche einzuteilen. 

Abstände und Größenangaben im StyleEdit 3

In diesem Abschnitt werden alle wichtigen Variablen behandelt und erklärt, die am grundsätzlichen Aufbau der Seite beteiligt sind. Hierbei handelt es sich zumeist um Breiten- und Höhenangaben, aber auch um die Werte, die herangezogen werden, um zu entscheiden, welche Darstellungsform für welches Endgerät beziehungsweise für welche Auflösung geeignet ist.

Beim Verständnis der folgenden Variablen hilft dem weniger Englisch gewandten Nutzer vielleicht der Hinweis, dass der Begriff Screen auf deutsch Bildschirm bedeutet:

$screen-xs-min: Variable für die minimale Displaybreite eines Smartphones. xs ist kurz für “extra small”. Im Standard ist die Variable mit dem Wert 480 px belegt.

$screen-xs-max: Variable für die maximale Displaybreite eines Smartphones. Im Standard ist die Variable mit dem Wert 767 px belegt. Zusammen mit der oberen Variable wird so definiert: alles zwischen 480 und 767 Pixeln Breite ist als Smartphone – oder allgemeiner – extra kleines Gerät zu betrachten.

$screen-sm-min: Variable für die minimale Displaybreite eines Tablets im Portraitmodus. sm steht für “small to medium”, also kleines bis mittleres Gerät. Im Standard ist die Variable mit dem Wert 768 px belegt.

$screen-sm-max: Variable für die maximale Displaybreite eines Tablets im Portraitmodus. Im Standard ist die Variable mit dem Wert 991 px belegt. Alles zwischen 768 und 991 Pixeln Bildschirmbreite ist damit für den Shop ein Tablet im Portraitmodus.

$screen-md-min: Variable für die minimale Displaybreite eines Tablets oder kleinen Displays im horizontalen (Landscape) Modus (md steht für “medium Size”). Im Standard ist die Variable mit dem Wert 992 px belegt.

$screen-md-max: Variable für die maximale Displaybreite eines Tablets oder kleinen Displays im Landscape Modus. Im Standard ist die Variable mit dem Wert 1199 px belegt.

$screen-lg-min: Variable für die minimale Displaybreite eines großen Monitors, lg bedeutet einfach “large”, also groß. Im Standard ist die Variable mit dem Wert 1200 px belegt. Hier machen wir nach oben auch keine Begrenzung mehr. Auf allem, was als großes Display zählt, gehen wir davon aus, keine Sonderregeln für noch größere Geräte zu brauchen.

Beispiel:

// Die folgenden Styles gelten nur für Auflösungen unter 320px
@media (max-width: $screen-xs-min) {
    #outer-wrapper {
        width: 100%;
    }
}
// Die folgenden Styles gelten nur für Auflösungen in einem Bereich zwischen 320px bis 767px
@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
    #outer-wrapper {
        width: 80%;
    }
}
// Die folgenden Styles gelten nur für Auflösungen in einem Bereich zwischen 768px bis 991px
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    #outer-wrapper {
        width: 75%;
    }
}
// Die folgenden Styles gelten nur für Auflösungen in einem Bereich zwischen 992px bis 1199px
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    #outer-wrapper {
        width: 60%;
    }
}
// Die folgenden Styles gelten nur für Auflösungen ab 1200px
@media (min-width: $screen-lg-min) {
    #outer-wrapper {
        width: 50%;
    }
}

$navbar-height: Variable für die Höhe der horizontalen Kategorienavigation, navbar ist die Abkürzung für “navigation bar” zu deutsch also “Navigations-Leiste”. Im Standard ist die Variable mit 50px belegt.

$line-height-computed: Die berechnete Zeilenhöhe einer Textzeile. Wird verwendet, um Text in bestimmten Bereichen des Templates (z.B. in der Kategorienavigation oder in den Hinweisen) zu zentrieren. Wird dynamisch aus der verwendeten Schriftgröße und der Standard-Zeilenhöhe berechnet.

$line-height-base: Die oben schon angesprochene Standard-Zeilenhöhe. Wird für die Berechnung von Abständen verwendet, oder um die Zeilenhöhe auf einen initialen Wert zu setzen. Standardmäßig verwenden wir hier einen Wert von 1.428571429 “Punkten”. Dieser Wert berechnet sich aus der Standardschriftgröße von 14px und einer gewünschten Zeilenhöhe von 20px.

$grid-gutter-width: Variable für den Abstand zwischen den einzelnen Grid-Spalten. Der Wert dieser wird einmal durch zwei geteilt, um die Abstände links und rechts einer Spalte zu berechnen. Im Standard ist die Variable mit 30px belegt, links und rechts werden also je 15px verwendet.

Farben im StyleEdit 3

Ohne Farben wäre es doch ein wenig trist auf einer Website oder in einem Online-Shop, findet ihr nicht auch? Folgende Farben werden euch auf jeden Fall im StyleEdit 3 begegnen und viele davon habt ihr im vorherigen Tutorial auch schon mal gesehen. Ich habe versucht, die einzelnen Variablen zu gruppieren, damit es ein wenig übersichtlicher wird. Farbwerte werden üblicherweise in Hexadezimal-Schreibweise notiert. Ausnahme bilden hier Werte, die einen Wert für die Deckkraft enthalten. Diese werden in der sogenannten rgba()-Notation erfasst.

Globale Werte

Hier finden sich Variablen, die im ganzen Shop verteilt Verwendung finden. Sie definieren unter anderem die Hauptfarbe und Textfarbe des Shops oder dienen als Hintergrundfarben für bestimmte Schaltflächen oder Navigationselemente.

$brand-primary: Im vorherigen Tutorial hab ich die Hauptfarbe beschrieben. Diese wird in der Variable $brand-primary gespeichert und ist im Standard mit dem Blau unseres Gambio Corporate-Designs belegt. So schön unser blau ist, so sollten Shopbetreiber doch, sobald sie eine eigene Firmenidentität entwickelt haben, hier ihre eigene Farbe einsetzen.

$text-color: Die Schriftfarbe eures Shops. Ist im normalfall ein sehr dunkles Grau mit dem Farbwert #333333. Wenn ihr den Kontrast erhöhen wollt, ändert diesen Wert auf etwas dunkleres oder setzt ihn direkt auf Schwarz, wobei ganz schwarz manchmal auch etwas “knallig” sein kann.

$gray: Ein Farbwert, der z.B. für die Textfarbe in Texteingabefeldern verwendet wird. Ist etwas heller als die normale Textfarbe, damit diese besser mit den Eingabefeldern harmoniert. Standardmäßig mit dem Farbwert #555555 belegt.

$gray-light: Dieser Farbwert wird zum Beispiel für die Anzeige des alten Preises bei einem Sonderangebot verwendet oder für die Anzeige der VPE oder Mengeneinheiten. Im Standard wird hier der Farbwert #777777 verwendet.

$gray-lighter: Wird zum Beispiel für deaktivierte Buttons verwendet. Das helle grau soll zum Ausdruck bringen, dass ein Klick auf den Button momentan nicht möglich ist. Die Variable ist mit dem Farbwert #EEEEEE belegt.

Seitenelemente

Diese Variablen werden für die Gestaltung einzelner Bereiche im gesamten Shop verwendet. Zu nennen sind hier Farben für die Navigationsleiste oder für die Schriftfarbe im Footer.

$navbar-default-bg: Hintergrundfarbe der horizontalen Kategorienavigation, bg steht hier für “background”, also Hintergrund. Im Standard ein dunkles Grau mit folgendem Hexadezimal-Wert: #393939.

$gx-custom-bg-color: Hintergrundfarbe von Zusatzeinträgen in der horizontalen Kategorienavigation. Diese erscheinen, sobald im Contentmanager für einen Content die Position “topmenu” ausgewählt wird. Im Standard wird hier die Hauptfarbe des Shops genutzt, es lässt sich aber über den StyleEdit3 auch eine andere Farbe konfigurieren.

$dropdown-bg: Hintergrundfarbe eines offenen Megadropdown-Elements. Im Standard ist dieses weiß, es kann aber im StyleEdit 3 auf einen beliebigen anderen Farbwert geändert werden.

$gx-footer-color: Schriftfarbe für Elemente im Footer. Da im Footer schon im Standard eine andere Schriftfarbe als für normale Fließtexte verwendet wird, ist diese über die genannte Variable konfigurabel. Im Standard ist die Schriftfarbe mit dem Wert #666666 belegt.

$gx-panel-bg: Hintergrundfarbe einer Menübox. Standard ist auch hier weiß, diese kann aber ebenfalls beliebig angepasst werden.

Buttons

Buttons gibt es zahlreiche im Shop. Damit diese, je nach Wichtigkeit, unterschieden werden können, gibt es einige Variablen, die für die unterschiedlichen Typen von Buttons unterschiedliche Farben zur Verfügung stellen. Natürlich wollen wir die Kunden durch die Hervorhebung der wichtigen Buttons ein wenig durch Ihren Einkauf leiten, denn Kunden klicken gern immer auf den nächsten “roten” Button.

$btn-primary-color: Schriftfarbe eines Buttons, der eine wichtige bzw. gewollte Aktion auslösen soll. Im Standard #FFFFFF.

$btn-primary-bg: Hintergrundfarbe eines Buttons, der eine wichtige bzw. gewollte Aktion auslösen soll. Im Standard wird hier die Hauptfarbe des Shops verwendet. Das heißt, wenn ihr die Hauptfarbe des Shops ändert, ändert sich auch die Hintergrundfarbe dieser Buttons.

$btn-primary-border: Hierbei handelt es sich um die Rahmenfarbe eines Buttons, der eine wichtige bzw. gewollte Aktion auslösen soll. Dieser Wert wird aus der Hintergrundfarbe des Buttons berechnet, sodass der Rahmen passend zur Farbe des Buttons ist.

$btn-default-color: Schriftfarbe eines allgemeinen Buttons. Im Standard #333333. Da mit diesen Buttons in der Regel keine wichtigen Aktionen ausgeführt werden, erfolgt hier keine optische Hervorhebung.

$btn-default-bg: Hintergrundfarbe eines allgemeinen Buttons. Wir verwenden hier im Standard ein helles Grau mit dem Wert #f3f3f3.

$btn-default-border: Rahmenfarbe eines allgemeinen Buttons. Auch hierbei handelt es sich um einen berechneten Wert, der passend zur Hintergrundfarbe des normalen Buttons ist.

$gx-btn-calltoaction-bg: Hintergrundfarbe des In-den-Warenkorb-Buttons. Dieser wird gesondert hervorgehoben und ist im Standard mit einem Grün mit dem Wert #2EAE06 belegt.

Analog zu den anderen Buttons wird auch beim In-den-Warenkorb-Button die Rahmenfarbe aus der Hintergrundfarbe des Buttons berechnet. Passend zur Hintergrundfarbe ist die Schriftfarbe im Standard weiß. Die Variablen-Namen bilden sich auch analog zu den anderen Buttons und lauten $gx-btn-calltoaction-border und $gx-btn-calltoaction-color.

Hinweise

Hinweise werden im Shop immer dann angezeigt, wenn zusätzliche Informationen oder Erfolgs-/Fehlermeldungen bereitgestellt werden sollen. Hinweis haben wir auf Englisch mit dem Wort “alert” übersetzt und je nach Typ des Hinweises werden hierfür unterschiedliche Farben benötigt.

$alert-danger-bg: Hintergrundfarbe eines Fehler-Hinweises. Dient als Basis für die Berechnung der Rahmenfarbe des Hinweises. Im Standard ist dies ein Rot mit dem Wert #C20400.

$alert-danger-text: Schriftfarbe eines Fehler-Hinweises. Diese ist im Standard weiß, hat also den Wert #FFFFFF.

$alert-danger-border: Berechneter Wert für die Rahmenfarbe des Fehler-Hinweises. Basis für die Berechnung ist die Hintergrundfarbe des Fehler-Hinweises.

$alert-success-bg: Hintergrundfarbe des Erfolgs-Hinweises. Dient als Basis für die Berechnung der Rahmenfarbe des Hinweises. Im Standard ist dies ein Grün mit dem Wert #00990B.

$alert-success-border: Berechneter Wert für die Rahmenfarbe des Erfolgs-Hinweises. Basis für die Berechnung ist die Hintergrundfarbe des Erfolgs-Hinweises.

$alert-success-text: Schriftfarbe eines Erfolgs-Hinweises. Diese ist im Standard weiß, hat also den Wert #FFFFFF.

$alert-info-bg: Hintergrundfarbe für Informations-Hinweise. Dient als Basis für die Berechnung der Rahmenfarbe des Hinweises. Im Standard ist dies die Hauptfarbe des Shops.

$alert-info-border: Berechneter Wert für die Rahmenfarbe des Informations-Hinweises. Basis für die Berechnung ist die Hintergrundfarbe des Informations-Hinweises.

$alert-warning-text: Schriftfarbe eines Warnhinweises. Diese ist im Standard weiß, hat also den Wert #FFFFFF.

$alert-warning-bg: Hintergrundfarbe von Warnhinweisen. Dient als Basis für die Berechnung der Rahmenfarbe des Hinweises. Im Standard ist dies ein Orange mit dem Wert #FFAE00.

$alert-warning-border: Berechneter Wert für die Rahmenfarbe von Warnhinweisen. Basis für die Berechnung ist die Hintergrundfarbe des Warnhinweisen.

$alert-info-text: Schriftfarbe eines Informations-Hinweises. Diese ist im Standard weiß, hat also den Wert #FFFFFF.

SCSS-Funktionen und Mixins

SCSS als CSS-Präprozessor bringt einige Funktionen mit sich, die dazu verwendet werden können, um Pixel-Werte zu berechnen oder um Farben nach bestimmten Vorgaben zu erweitern. Zusätzlich dazu bringt Bootstrap noch einige so genannte “Mixins” mit sich. Hierbei handelt es sich um eine Gruppierung von CSS-Regeln, die als Gruppe durch Ihren Aufruf auf Seitenelemente angewendet werden können.

Beispiel für ein Mixin

Nehmen wir an, wir wollen eine Gruppe von Regeln für einen Button haben, damit alle Buttons in unserem Shop nach bestimmten Regeln gestaltet werden und damit alle gleich aussehen. Hierfür definieren wir ein Mixin mit dem Namen button-basic-style, was in SCSS wie folgt aussehen könnte:

@mixin button-basic-style() {
  cursor:          pointer;
  padding:         6px 12px;
  margin:          0 0 12px 12px;
  min-width:       92px;
  height:          31px;
  font-weight:     400;
  text-align:      center;
  text-decoration: none;
  outline:         none;
}

Wenn wir dieses Mixin jetzt an anderer Stelle für einen neuen Button anwenden wollen, können wir dies wie folgt tun:

.my-new-button {
    @include button-basic-style();
    // weitere Anweisungen speziell für diesen Button
}

Wir laden also für den Button unseren Grundstil und können dann individuell für den Button noch Sonderregeln hinten anhängen. Wir brauchen so nicht alle Arbeit mehrmals zu machen und hätten dafür gesorgt, dass der neue Button auf jeden Fall die gleichen Maße, Schriftgrößen und -ausrichtungen besitzt wie alle anderen. Und wir können dann noch weitere Styles verbauen, die nur für diesen Button gelten sollen. So lässt sich wahnsinnig viel Zeit und Tipparbeit sparen.

Wir könnten hier nun auch noch weiter gehen und Variablen im Mixin verbauen, die dann dort weiter verwendet werden. Dies könnte dann wie folgt aussehen:

@mixin button-basic-style($color, $bg-color) {
    background-color: $bg-color;
    border-color:     darken($bg-color, 5%);
    color:            $color;
    cursor:           pointer;
    padding:          6px 12px;
    margin:           0 0 12px 12px;
    min-width:        92px;
    height:           31px;
    font-weight:      400;
    text-align:       center;
    text-decoration:  none;
    outline:          none;
}

Wir haben hier im Beispiel in den Zeilen für die Hintergrundfarbe (background-color), Rahmenfarbe (border-color), Elementfarbe (color) jetzt die Möglichkeit verbaut, dass sich das Mixin mit zusätzlichen Parametern aufrufen lässt, die dann für Hintergrundfarbe, Rahmen- und Schriftfarbe herangezogen werden. So können weitere Zeilen CSS-Code eingespart werden und es ist trotzdem gewährleistet, dass die Elemente flexibel gestaltet werden können.

Angewendet wird das Mixin dann wie folgt:

.my-new-button {
    @include button-basic-style(#FFFFFF, #C20400);
    // weitere Anweisungen speziell für diesen Button
}

Daraus würde der Shop dann einen roten Button mit weißer Schrift erzeugen. Zu erwähnen wäre noch, dass hier die SCSS-Funktion darken() verwendet wird. Was es damit auf sich hat, werde ich gleich noch erklären 😉 .

Folgende Mixins, welche wir im Shop verwenden, sind interessant:

@include make-xs-column(<Wert>)
@include make-sm-column(<Wert>)
@include make-md-column(<Wert>)
@include make-lg-column(<Wert>)

Diese erzeugen die Styles für die einzelnen Gridspalten in Bootstrap, jweils für die unterschiedlichen Breakpoints. <Wert> kann hierbei Zahlen von 0 bis 12 annehmen.

@include button-variant(<color>, <background>, <border>)

Erzeugt Styles für einen Button mit all seinen Zuständen. <color> ist der Wert für die Schriftfarbe, <background> der Wert für die Hintergrundfarbe und <border> der Wert für die Rahmenfarbe des Buttons.

Wer sich eingehender mit den Mixins von Bootstrap beschäftigen möchte, dem sei Folgendes an Herz gelegt: https://gist.github.com/anthonyholmes/b397e8a95ce2aca71f8e Hier findet sich eine Auflistung aller Mixins, die Bootstrap schon mit sich bringt.

SCSS-Funktionen

SCSS oder vielmehr Sass, welches die Basis für SCSS ist, liefert einige Funktionen, mit denen unter anderem Berechnungen oder Farbanpassungen durchgeführt werden können. Folgende dürften euch im StyleEdit 3 schon mal begegnet sein:

floor(): Die Funktion floor() wird dazu verwendet, das Ergebnis einer Berechnung auf die nächst kleinere ganze Zahl abzurunden. Wir bekommen damit auch hier statt krummer Zahlen gerade Zahlen für Weiterberechnungen hin. Die Funktion kommt unter anderem bei der Berechnung der Zeilenhöhe zum Einsatz. Beispiel für die Verwendung wäre zum Beispiel:

floor(($font-size-base * $line-height-base))

Dies ergibt eine Zeilenhöhe von 20px, wenn man davon ausgeht, dass die Schriftgröße 14px ist und der oben genannte Wert von $line-height-base verwendet wird.Soll das Ergebnis aufgerundet werden, so kann ceil() verwendet werden.

darken(): Dunkelt einen gegebenen Farbwert um einen bestimmten Prozentwert ab. Syntax für die Verwendung ist hier:

darken(<farbwert>, <prozentwert>)

darken(#FFFFFF, 5%) würde die Farbe Weiß also um 5% dunkler machen. Wir haben also einen Inhalt und wollen einen weiteren darunter etwas dunkler darstellen, um unsere Kunden zu lenken? Wir greifen uns also die Farbe des Elements davor und sagen “nimm dieselbe, nur etwas dunkler”. Definiere ich später die Farbe des Elements davor um, wird mein zweites Element dem ersten folgen, nur eben auch diesmal etwas dunkler. Bequem, oder?

lighten(): Hellt einen gegebenen Farbwert um einen bestimmten Prozentwert auf. Syntax für die Verwendung ist hier analog zu darken():

lighten(<farbwert>, <prozentwert>)

lighten(#000000, 5%) würde die Farbe Schwarz also um 5% heller machen.

rgba(): Erzeugt einen Farbwert aus den Komponenten Rot, Grün, Blau und dem Alpha-Kanal für eine mögliche Transparenz. Syntax für die Verwendung wäre hier wie folgt:

rgba(<rot>, <grün>, <blau>, <transparenz>)

Gültige Werte für <rot>, <grün> und <blau> wären Zahlen von 0 bis 255, wobei 0 das Nichtvorhandensein der Farbe bedeutet und 255 der maximale Wert für die Farbe darstellt.

Gültige Werte für <transparenz> sind Fließkommazahlen zwischen 0 bis 1, wobei 0 komplett durchsichtig ist und 1 die maximale Deckkraft darstellt. Bei 0,85 wäre eine Farbe also zu 15% transparent.

rgba(255, 255, 255, 1) würde ein voll deckendes Weiß ergeben, während rgba(0, 0, 0, 0.5) ein halb durchsichtiges Schwarz erzeugen würde.

Abschluss

Das war es schon für heute mit meinem kurzen Ausflug in die Welt der CSS-Präprozessoren. Ich hoffe ihr versteht nun, wozu es die ganzen Variablen gibt und sich damit so anstellen lässt.

Schaut auch das nächste mal wieder rein, denn die Artikelserie zum Thema StyleEdit 3 hier im Blog ist noch lange nicht beendet 🙂

Habt ihr noch Fragen? Wollt ihr ein bestimmtes Thema angesprochen wissen? Haut in die Tasten und lasst es uns wissen!

Bis dahin, viel Spaß mit eurem Gambio-Shop 🙂


Für aktuelle News aus der Welt des E-Commerce folge uns bei Twitter

Selbstverständlich findest du uns auch bei Facebook

Erstelle mit Gambio ganz einfach noch heute deinen eigenen Onlineshop

Mehr erfahren