{"id":9080,"date":"2017-09-06T14:30:28","date_gmt":"2017-09-06T12:30:28","guid":{"rendered":"https:\/\/www.gambio.de\/blog\/?p=9080"},"modified":"2017-09-06T15:34:00","modified_gmt":"2017-09-06T13:34:00","slug":"styleedit-3-tutorials-variablen-scss-mixins","status":"publish","type":"post","link":"https:\/\/www.gambio.de\/blog\/styleedit-3-tutorials-variablen-scss-mixins\/","title":{"rendered":"StyleEdit 3-Tutorials (Teil 2): Variablen, SCSS-Funktionen und Mixins"},"content":{"rendered":"

Nachdem wir im letzten Artikel zum Thema<\/a> StyleEdit 3 die wichtigsten Begriffe gekl\u00e4rt haben, wird es heute ein wenig technischer. Da sich dieser Artikel auf den vorherigen bezieht, empfehle ich, diesen vorab zu lesen.<\/p>\n

Wie bereits im letzten Artikel angesprochen verwenden wir im Honeygrid-Template die Technologie – oder besser das Ger\u00fcst – \u201cBootstrap\u201d und haben so die M\u00f6glichkeit auf sogenannte CSS-Pr\u00e4prozessoren zur\u00fcckzugreifen, welche die gestalterischen Aufgaben erheblich erleichtern k\u00f6nnen. Ein Pr\u00e4prozessor kann Aufgaben erledigen, bevor es um die eigentliche Arbeit geht.<\/p>\n

In unserem Fall bedeutet das, dass der Pr\u00e4prozessor schon etwas \u201cMathe machen\u201d 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 \u201cbenutze hier die Hintergrundfarbe\u201d oder \u201cverwende die Breite des Hauptinhalts\u201d, diese an der entsprechenden Stellen auslesen und dann passend einsetzen.<\/p>\n

Um wiederkehrende Werte f\u00fcr Farben, H\u00f6hen, Breiten und Abst\u00e4nde nicht jedes Mal neu schreiben zu m\u00fcssen und den Aufwand zu minimieren, sollte sich an diesen Werten einmal etwas \u00e4ndern, verwenden wir zahlreiche Variablen, in denen die ben\u00f6tigten Werte hinterlegt sind. Diese Variablen werden anschlie\u00dfend erst beim Erstellen des final ausgelieferten CSS in die richtigen Werte \u00fcbersetzt.<\/p>\n

<\/p>\n

Wir bem\u00fchen uns, m\u00f6glichst viele dieser Variablen im StyleEdit 3 einseh- und ver\u00e4nderbar \u00a0zu machen. Einige Variablen haben dabei etwas technische Namen und k\u00f6nnen so f\u00fcr Verwirrung sorgen, da nicht jeder sofort wei\u00df, was mit den jeweiligen Variablen gemeint sein k\u00f6nnte.<\/p>\n

Um hier Klarheit zu schaffen, m\u00f6chte ich in diesem Artikel einmal die wichtigsten Variablen auflisten und beschreiben, f\u00fcr was sie genutzt werden. Hierbei finden sich auch einige Variablen, die nicht direkt im StyleEdit 3 sichtbar sind, aber wichtig f\u00fcr das Verst\u00e4ndnis davon sind, wie das Template intern arbeitet.<\/p>\n

Damit der Beitrag nicht in eine simple Auflistung aller Variablen mit kurzer Erkl\u00e4rung ausartet, und um die \u00dcbersichtlichkeit zu wahren, versuche ich das Ganze ein wenig in Bereiche einzuteilen.\u00a0<\/p>\n

Abst\u00e4nde und Gr\u00f6\u00dfenangaben im StyleEdit 3<\/h2>\n

In diesem Abschnitt werden alle wichtigen Variablen behandelt und erkl\u00e4rt, die am grunds\u00e4tzlichen Aufbau der Seite beteiligt sind. Hierbei handelt es sich zumeist um Breiten- und H\u00f6henangaben, aber auch um die Werte, die herangezogen werden, um zu entscheiden, welche Darstellungsform f\u00fcr welches Endger\u00e4t beziehungsweise f\u00fcr welche Aufl\u00f6sung geeignet ist.<\/p>\n

Beim Verst\u00e4ndnis der folgenden Variablen hilft dem weniger Englisch gewandten Nutzer vielleicht der Hinweis, dass der Begriff Screen auf deutsch Bildschirm bedeutet:<\/p>\n

$screen-xs-min<\/b>: Variable f\u00fcr die minimale Displaybreite eines Smartphones. xs ist kurz f\u00fcr \u201cextra small\u201d. Im Standard ist die Variable mit dem Wert 480 px belegt.<\/p>\n

$screen-xs-max<\/b>: Variable f\u00fcr 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\u00e4t zu betrachten.<\/p>\n

$screen-sm-min<\/b>: Variable f\u00fcr die minimale Displaybreite eines Tablets im Portraitmodus. sm steht f\u00fcr \u201csmall to medium\u201d, also kleines bis mittleres Ger\u00e4t. Im Standard ist die Variable mit dem Wert 768 px belegt.<\/p>\n

$screen-sm-max<\/b>: Variable f\u00fcr 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\u00fcr den Shop ein Tablet im Portraitmodus.<\/p>\n

$screen-md-min<\/b>: Variable f\u00fcr die minimale Displaybreite eines Tablets oder kleinen Displays im horizontalen (Landscape) Modus (md steht f\u00fcr \u201cmedium Size\u201d). Im Standard ist die Variable mit dem Wert 992 px belegt.<\/p>\n

$screen-md-max<\/b>: Variable f\u00fcr die maximale Displaybreite eines Tablets oder kleinen Displays im Landscape Modus. Im Standard ist die Variable mit dem Wert 1199 px belegt.<\/p>\n

$screen-lg-min<\/b>: Variable f\u00fcr die minimale Displaybreite eines gro\u00dfen Monitors, lg bedeutet einfach \u201clarge\u201d, also gro\u00df. 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\u00dfes Display z\u00e4hlt, gehen wir davon aus, keine Sonderregeln f\u00fcr noch gr\u00f6\u00dfere Ger\u00e4te zu brauchen.<\/p>\n

Beispiel:<\/h3>\n
\/\/ Die folgenden Styles gelten nur f\u00fcr Aufl\u00f6sungen unter 320px\r\n@media (max-width: $screen-xs-min) {\r\n    #outer-wrapper {\r\n        width: 100%;\r\n    }\r\n}\r\n\/\/ Die folgenden Styles gelten nur f\u00fcr Aufl\u00f6sungen in einem Bereich zwischen 320px bis 767px\r\n@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {\r\n    #outer-wrapper {\r\n        width: 80%;\r\n    }\r\n}\r\n\/\/ Die folgenden Styles gelten nur f\u00fcr Aufl\u00f6sungen in einem Bereich zwischen 768px bis 991px\r\n@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {\r\n    #outer-wrapper {\r\n        width: 75%;\r\n    }\r\n}\r\n\/\/ Die folgenden Styles gelten nur f\u00fcr Aufl\u00f6sungen in einem Bereich zwischen 992px bis 1199px\r\n@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {\r\n    #outer-wrapper {\r\n        width: 60%;\r\n    }\r\n}\r\n\/\/ Die folgenden Styles gelten nur f\u00fcr Aufl\u00f6sungen ab 1200px\r\n@media (min-width: $screen-lg-min) {\r\n    #outer-wrapper {\r\n        width: 50%;\r\n    }\r\n}\r\n<\/pre>\n
$navbar-height<\/b>: Variable f\u00fcr die H\u00f6he der horizontalen Kategorienavigation, navbar ist die Abk\u00fcrzung f\u00fcr \u201cnavigation bar\u201d zu deutsch also \u201cNavigations-Leiste\u201d. Im Standard ist die Variable mit 50px belegt.<\/p>\n
$line-height-computed<\/b>: Die berechnete Zeilenh\u00f6he 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\u00f6\u00dfe und der Standard-Zeilenh\u00f6he berechnet.<\/p>\n
$line-height-base: <\/b>Die oben schon angesprochene Standard-Zeilenh\u00f6he. Wird f\u00fcr die Berechnung von Abst\u00e4nden verwendet, oder um die Zeilenh\u00f6he auf einen initialen Wert zu setzen. Standardm\u00e4\u00dfig verwenden wir hier einen Wert von 1.428571429 \u201cPunkten\u201d. Dieser Wert berechnet sich aus der Standardschriftgr\u00f6\u00dfe von 14px und einer gew\u00fcnschten Zeilenh\u00f6he von 20px.<\/p>\n
$grid-gutter-width<\/b>: Variable f\u00fcr den Abstand zwischen den einzelnen Grid-Spalten. Der Wert dieser wird einmal durch zwei geteilt, um die Abst\u00e4nde links und rechts einer Spalte zu berechnen. Im Standard ist die Variable mit 30px belegt, links und rechts werden also je 15px verwendet.<\/p>\n
Farben im StyleEdit 3<\/h2>\n
Ohne Farben w\u00e4re 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 \u00fcbersichtlicher wird. Farbwerte werden \u00fcblicherweise in Hexadezimal-Schreibweise notiert. Ausnahme bilden hier Werte, die einen Wert f\u00fcr die Deckkraft enthalten. Diese werden in der sogenannten rgba()-Notation erfasst.<\/p>\n
Globale Werte<\/h3>\n
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\u00fcr bestimmte Schaltfl\u00e4chen oder Navigationselemente.<\/p>\n
$brand-primary<\/b>: 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\u00f6n unser blau ist, so sollten Shopbetreiber doch, sobald sie eine eigene Firmenidentit\u00e4t entwickelt haben, hier ihre eigene Farbe einsetzen.<\/p>\n
$text-color<\/b>: Die Schriftfarbe eures Shops. Ist im normalfall ein sehr dunkles Grau mit dem Farbwert #333333. Wenn ihr den Kontrast erh\u00f6hen wollt, \u00e4ndert diesen Wert auf etwas dunkleres oder setzt ihn direkt auf Schwarz, wobei ganz schwarz manchmal auch etwas \u201cknallig\u201d sein kann.<\/p>\n
$gray<\/b>: Ein Farbwert, der z.B. f\u00fcr die Textfarbe in Texteingabefeldern verwendet wird. Ist etwas heller als die normale Textfarbe, damit diese besser mit den Eingabefeldern harmoniert. Standardm\u00e4\u00dfig mit dem Farbwert #555555 belegt.<\/p>\n
$gray-light<\/b>: Dieser Farbwert wird zum Beispiel f\u00fcr die Anzeige des alten Preises bei einem Sonderangebot verwendet oder f\u00fcr die Anzeige der VPE oder Mengeneinheiten. Im Standard wird hier der Farbwert #777777 verwendet.<\/p>\n
$gray-lighter<\/b>: Wird zum Beispiel f\u00fcr deaktivierte Buttons verwendet. Das helle grau soll zum Ausdruck bringen, dass ein Klick auf den Button momentan nicht m\u00f6glich ist. Die Variable ist mit dem Farbwert #EEEEEE belegt.<\/p>\n
Seitenelemente<\/h3>\n
Diese Variablen werden f\u00fcr die Gestaltung einzelner Bereiche im gesamten Shop verwendet. Zu nennen sind hier Farben f\u00fcr die Navigationsleiste oder f\u00fcr die Schriftfarbe im Footer.<\/p>\n
$navbar-default-bg<\/b>: Hintergrundfarbe der horizontalen Kategorienavigation, bg steht hier f\u00fcr \u201cbackground\u201d, also Hintergrund. Im Standard ein dunkles Grau mit folgendem Hexadezimal-Wert: #393939.<\/p>\n
$gx-custom-bg-color<\/b>: Hintergrundfarbe von Zusatzeintr\u00e4gen in der horizontalen Kategorienavigation. Diese erscheinen, sobald im Contentmanager f\u00fcr einen Content die Position \u201ctopmenu\u201d ausgew\u00e4hlt wird. Im Standard wird hier die Hauptfarbe des Shops genutzt, es l\u00e4sst sich aber \u00fcber den StyleEdit3 auch eine andere Farbe konfigurieren.<\/p>\n
$dropdown-bg<\/b>: Hintergrundfarbe eines offenen Megadropdown-Elements. Im Standard ist dieses wei\u00df, es kann aber im StyleEdit 3 auf einen beliebigen anderen Farbwert ge\u00e4ndert werden.<\/p>\n
$gx-footer-color<\/b>: Schriftfarbe f\u00fcr Elemente im Footer. Da im Footer schon im Standard eine andere Schriftfarbe als f\u00fcr normale Flie\u00dftexte verwendet wird, ist diese \u00fcber die genannte Variable konfigurabel. Im Standard ist die Schriftfarbe mit dem Wert #666666 belegt.<\/p>\n
$gx-panel-bg<\/b>: Hintergrundfarbe einer Men\u00fcbox. Standard ist auch hier wei\u00df, diese kann aber ebenfalls beliebig angepasst werden.<\/p>\n
Buttons<\/h3>\n
Buttons gibt es zahlreiche im Shop. Damit diese, je nach Wichtigkeit, unterschieden werden k\u00f6nnen, gibt es einige Variablen, die f\u00fcr die unterschiedlichen Typen von Buttons unterschiedliche Farben zur Verf\u00fcgung stellen. Nat\u00fcrlich wollen wir die Kunden durch die Hervorhebung der wichtigen Buttons ein wenig durch Ihren Einkauf leiten, denn Kunden klicken gern immer auf den n\u00e4chsten \u201croten\u201d Button.<\/p>\n
$btn-primary-color<\/b>: Schriftfarbe eines Buttons, der eine wichtige bzw. gewollte Aktion ausl\u00f6sen soll. Im Standard #FFFFFF.<\/p>\n
$btn-primary-bg<\/b>: Hintergrundfarbe eines Buttons, der eine wichtige bzw. gewollte Aktion ausl\u00f6sen soll. Im Standard wird hier die Hauptfarbe des Shops verwendet. Das hei\u00dft, wenn ihr die Hauptfarbe des Shops \u00e4ndert, \u00e4ndert sich auch die Hintergrundfarbe dieser Buttons.<\/p>\n
$btn-primary-border<\/b>: Hierbei handelt es sich um die Rahmenfarbe eines Buttons, der eine wichtige bzw. gewollte Aktion ausl\u00f6sen soll. Dieser Wert wird aus der Hintergrundfarbe des Buttons berechnet, sodass der Rahmen passend zur Farbe des Buttons ist.<\/p>\n
$btn-default-color<\/b>: Schriftfarbe eines allgemeinen Buttons. Im Standard #333333. Da mit diesen Buttons in der Regel keine wichtigen Aktionen ausgef\u00fchrt werden, erfolgt hier keine optische Hervorhebung.<\/p>\n
$btn-default-bg<\/b>: Hintergrundfarbe eines allgemeinen Buttons. Wir verwenden hier im Standard ein helles Grau mit dem Wert #f3f3f3.<\/p>\n
$btn-default-border<\/b>: Rahmenfarbe eines allgemeinen Buttons. Auch hierbei handelt es sich um einen berechneten Wert, der passend zur Hintergrundfarbe des normalen Buttons ist.<\/p>\n
$gx-btn-calltoaction-bg<\/b>: Hintergrundfarbe des In-den-Warenkorb-Buttons. Dieser wird gesondert hervorgehoben und ist im Standard mit einem Gr\u00fcn mit dem Wert #2EAE06 belegt.<\/p>\n
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\u00df. Die Variablen-Namen bilden sich auch analog zu den anderen Buttons und lauten $gx-btn-calltoaction-border und $gx-btn-calltoaction-color.<\/p>\n
Hinweise<\/h3>\n
Hinweise werden im Shop immer dann angezeigt, wenn zus\u00e4tzliche Informationen oder Erfolgs-\/Fehlermeldungen bereitgestellt werden sollen. Hinweis haben wir auf Englisch mit dem Wort \u201calert\u201d \u00fcbersetzt und je nach Typ des Hinweises werden hierf\u00fcr unterschiedliche Farben ben\u00f6tigt.<\/p>\n
$alert-danger-bg<\/b>: Hintergrundfarbe eines Fehler-Hinweises. Dient als Basis f\u00fcr die Berechnung der Rahmenfarbe des Hinweises. Im Standard ist dies ein Rot mit dem Wert #C20400.<\/p>\n
$alert-danger-text<\/b>: Schriftfarbe eines Fehler-Hinweises. Diese ist im Standard wei\u00df, hat also den Wert #FFFFFF.<\/p>\n
$alert-danger-border<\/b>: Berechneter Wert f\u00fcr die Rahmenfarbe des Fehler-Hinweises. Basis f\u00fcr die Berechnung ist die Hintergrundfarbe des Fehler-Hinweises.<\/p>\n
$alert-success-bg<\/b>: Hintergrundfarbe des Erfolgs-Hinweises. Dient als Basis f\u00fcr die Berechnung der Rahmenfarbe des Hinweises. Im Standard ist dies ein Gr\u00fcn mit dem Wert #00990B.<\/p>\n
$alert-success-border<\/b>: Berechneter Wert f\u00fcr die Rahmenfarbe des Erfolgs-Hinweises. Basis f\u00fcr die Berechnung ist die Hintergrundfarbe des Erfolgs-Hinweises.<\/p>\n
$alert-success-text<\/b>: Schriftfarbe eines Erfolgs-Hinweises. Diese ist im Standard wei\u00df, hat also den Wert #FFFFFF.<\/p>\n
$alert-info-bg<\/b>: Hintergrundfarbe f\u00fcr Informations-Hinweise. Dient als Basis f\u00fcr die Berechnung der Rahmenfarbe des Hinweises. Im Standard ist dies die Hauptfarbe des Shops.<\/p>\n
$alert-info-border<\/b>: Berechneter Wert f\u00fcr die Rahmenfarbe des Informations-Hinweises. Basis f\u00fcr die Berechnung ist die Hintergrundfarbe des Informations-Hinweises.<\/p>\n
$alert-warning-text<\/b>: Schriftfarbe eines Warnhinweises. Diese ist im Standard wei\u00df, hat also den Wert #FFFFFF.<\/p>\n
$alert-warning-bg<\/b>: Hintergrundfarbe von Warnhinweisen. Dient als Basis f\u00fcr die Berechnung der Rahmenfarbe des Hinweises. Im Standard ist dies ein Orange mit dem Wert #FFAE00.<\/p>\n
$alert-warning-border<\/b>: Berechneter Wert f\u00fcr die Rahmenfarbe von Warnhinweisen. Basis f\u00fcr die Berechnung ist die Hintergrundfarbe des Warnhinweisen.<\/p>\n
$alert-info-text<\/b>: Schriftfarbe eines Informations-Hinweises. Diese ist im Standard wei\u00df, hat also den Wert #FFFFFF.<\/p>\n
SCSS-Funktionen und Mixins<\/h2>\n
SCSS als CSS-Pr\u00e4prozessor bringt einige Funktionen mit sich, die dazu verwendet werden k\u00f6nnen, um Pixel-Werte zu berechnen oder um Farben nach bestimmten Vorgaben zu erweitern. Zus\u00e4tzlich dazu bringt Bootstrap noch einige so genannte \u201cMixins\u201d mit sich. Hierbei handelt es sich um eine Gruppierung von CSS-Regeln, die als Gruppe durch Ihren Aufruf auf Seitenelemente angewendet werden k\u00f6nnen.<\/p>\n
Beispiel f\u00fcr ein Mixin<\/h3>\n
Nehmen wir an, wir wollen eine Gruppe von Regeln f\u00fcr einen Button haben, damit alle Buttons in unserem Shop nach bestimmten Regeln gestaltet werden und damit alle gleich aussehen. Hierf\u00fcr definieren wir ein Mixin mit dem Namen button-basic-style<\/b>, was in SCSS wie folgt aussehen k\u00f6nnte:<\/p>\n
@mixin button-basic-style() {\r\n  cursor:          pointer;\r\n  padding:         6px 12px;\r\n  margin:          0 0 12px 12px;\r\n  min-width:       92px;\r\n  height:          31px;\r\n  font-weight:     400;\r\n  text-align:      center;\r\n  text-decoration: none;\r\n  outline:         none;\r\n}<\/pre>\n
Wenn wir dieses Mixin jetzt an anderer Stelle f\u00fcr einen neuen Button anwenden wollen, k\u00f6nnen wir dies wie folgt tun:<\/p>\n
.my-new-button {\r\n    @include button-basic-style();\r\n    \/\/ weitere Anweisungen speziell f\u00fcr diesen Button\r\n}\r\n<\/pre>\n
Wir laden also f\u00fcr den Button unseren Grundstil und k\u00f6nnen dann individuell f\u00fcr den Button noch Sonderregeln hinten anh\u00e4ngen. Wir brauchen so nicht alle Arbeit mehrmals zu machen und h\u00e4tten daf\u00fcr gesorgt, dass der neue Button auf jeden Fall die gleichen Ma\u00dfe, Schriftgr\u00f6\u00dfen und -ausrichtungen besitzt wie alle anderen. Und wir k\u00f6nnen dann noch weitere Styles verbauen, die nur f\u00fcr diesen Button gelten sollen. So l\u00e4sst sich wahnsinnig viel Zeit und Tipparbeit sparen.<\/p>\n
Wir k\u00f6nnten hier nun auch noch weiter gehen und Variablen im Mixin verbauen, die dann dort weiter verwendet werden. Dies k\u00f6nnte dann wie folgt aussehen:<\/p>\n
@mixin button-basic-style($color, $bg-color) {\r\n    background-color: $bg-color;\r\n    border-color:     darken($bg-color, 5%);\r\n    color:            $color;\r\n    cursor:           pointer;\r\n    padding:          6px 12px;\r\n    margin:           0 0 12px 12px;\r\n    min-width:        92px;\r\n    height:           31px;\r\n    font-weight:      400;\r\n    text-align:       center;\r\n    text-decoration:  none;\r\n    outline:          none;\r\n}<\/pre>\n
Wir haben hier im Beispiel in den Zeilen f\u00fcr die Hintergrundfarbe (background-color), Rahmenfarbe (border-color), Elementfarbe (color) jetzt die M\u00f6glichkeit verbaut, dass sich das Mixin mit zus\u00e4tzlichen Parametern aufrufen l\u00e4sst, die dann f\u00fcr Hintergrundfarbe, Rahmen- und Schriftfarbe herangezogen werden. So k\u00f6nnen weitere Zeilen CSS-Code eingespart werden und es ist trotzdem gew\u00e4hrleistet, dass die Elemente flexibel gestaltet werden k\u00f6nnen.<\/p>\n
Angewendet wird das Mixin dann wie folgt:<\/p>\n
.my-new-button {\r\n    @include button-basic-style(#FFFFFF, #C20400);\r\n    \/\/ weitere Anweisungen speziell f\u00fcr diesen Button\r\n}\r\n<\/pre>\n
Daraus w\u00fcrde der Shop dann einen roten Button mit wei\u00dfer Schrift erzeugen. Zu erw\u00e4hnen w\u00e4re noch, dass hier die SCSS-Funktion darken() <\/b>verwendet wird. Was es damit auf sich hat, werde ich gleich noch erkl\u00e4ren \ud83d\ude09 .<\/p>\n
Folgende Mixins, welche wir im Shop verwenden, sind interessant:<\/p>\n
@include make-xs-column(<Wert>)\r\n@include make-sm-column(<Wert>)\r\n@include make-md-column(<Wert>)\r\n@include make-lg-column(<Wert>)<\/pre>\n
Diese erzeugen die Styles f\u00fcr die einzelnen Gridspalten in Bootstrap, jweils f\u00fcr die unterschiedlichen Breakpoints. <Wert> kann hierbei Zahlen von 0 bis 12 annehmen.<\/p>\n
@include button-variant(<color>, <background>, <border>)<\/pre>\n
Erzeugt Styles f\u00fcr einen Button mit all seinen Zust\u00e4nden. <color> ist der Wert f\u00fcr die Schriftfarbe, <background> der Wert f\u00fcr die Hintergrundfarbe und <border> der Wert f\u00fcr die Rahmenfarbe des Buttons.<\/p>\n
Wer sich eingehender mit den Mixins von Bootstrap besch\u00e4ftigen m\u00f6chte, dem sei Folgendes an Herz gelegt: https:\/\/gist.github.com\/anthonyholmes\/b397e8a95ce2aca71f8e<\/a> Hier findet sich eine Auflistung aller Mixins, die Bootstrap schon mit sich bringt.<\/p>\n
SCSS-Funktionen<\/h3>\n
SCSS oder vielmehr Sass, welches die Basis f\u00fcr SCSS ist, liefert einige Funktionen, mit denen unter anderem Berechnungen oder Farbanpassungen durchgef\u00fchrt werden k\u00f6nnen. Folgende d\u00fcrften euch im StyleEdit 3 schon mal begegnet sein:<\/p>\n
floor()<\/b>: Die Funktion floor() wird dazu verwendet, das Ergebnis einer Berechnung auf die n\u00e4chst kleinere ganze Zahl abzurunden. Wir bekommen damit auch hier statt krummer Zahlen gerade Zahlen f\u00fcr Weiterberechnungen hin. Die Funktion kommt unter anderem bei der Berechnung der Zeilenh\u00f6he zum Einsatz. Beispiel f\u00fcr die Verwendung w\u00e4re zum Beispiel:<\/p>\n
floor(($font-size-base * $line-height-base))<\/pre>\n
Dies ergibt eine Zeilenh\u00f6he von 20px, wenn man davon ausgeht, dass die Schriftgr\u00f6\u00dfe 14px ist und der oben genannte Wert von $line-height-base <\/b>verwendet wird.Soll das Ergebnis aufgerundet werden, so kann ceil()<\/b> verwendet werden.<\/p>\n
darken()<\/b>: Dunkelt einen gegebenen Farbwert um einen bestimmten Prozentwert ab. Syntax f\u00fcr die Verwendung ist hier:<\/p>\n
darken(<farbwert>, <prozentwert>)<\/pre>\n
darken(#FFFFFF<\/span>, 5%<\/span>)<\/code> w\u00fcrde die Farbe Wei\u00df 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 \u201cnimm dieselbe, nur etwas dunkler\u201d. Definiere ich sp\u00e4ter die Farbe des Elements davor um, wird mein zweites Element dem ersten folgen, nur eben auch diesmal etwas dunkler. Bequem, oder?<\/p>\n
lighten()<\/b>: Hellt einen gegebenen Farbwert um einen bestimmten Prozentwert auf. Syntax f\u00fcr die Verwendung ist hier analog zu darken()<\/b>:<\/p>\n
lighten(<farbwert>, <prozentwert>)<\/pre>\n
lighten(#000000<\/span>, 5%<\/span>)<\/code> w\u00fcrde die Farbe Schwarz also um 5% heller machen.<\/p>\n
rgba()<\/b>: Erzeugt einen Farbwert aus den Komponenten Rot, Gr\u00fcn, Blau und dem Alpha-Kanal f\u00fcr eine m\u00f6gliche Transparenz. Syntax f\u00fcr die Verwendung w\u00e4re hier wie folgt:<\/p>\n
rgba(<rot>, <gr\u00fcn>, <blau>, <transparenz>)<\/pre>\n
G\u00fcltige Werte f\u00fcr <rot>, <gr\u00fcn> und <blau> w\u00e4ren Zahlen von 0 bis 255, wobei 0 das Nichtvorhandensein der Farbe bedeutet und 255 der maximale Wert f\u00fcr die Farbe darstellt.<\/p>\n
G\u00fcltige Werte f\u00fcr <transparenz> sind Flie\u00dfkommazahlen zwischen 0 bis 1, wobei 0 komplett durchsichtig ist und 1 die maximale Deckkraft darstellt. Bei 0,85 w\u00e4re eine Farbe also zu 15% transparent.<\/p>\n
rgba(255<\/span>, 255<\/span>, 255<\/span>, 1<\/span>) <\/code>w\u00fcrde ein voll deckendes Wei\u00df ergeben, w\u00e4hrend rgba(0<\/span>, 0<\/span>, 0<\/span>, 0.5<\/span>)<\/code> ein halb durchsichtiges Schwarz erzeugen w\u00fcrde.<\/p>\n
Abschluss<\/h2>\n
Das war es schon f\u00fcr heute mit meinem kurzen Ausflug in die Welt der CSS-Pr\u00e4prozessoren. Ich hoffe ihr versteht nun, wozu es die ganzen Variablen gibt und sich damit so anstellen l\u00e4sst.<\/p>\n
Schaut auch das n\u00e4chste mal wieder rein, denn die Artikelserie zum Thema StyleEdit 3 hier im Blog ist noch lange nicht beendet \ud83d\ude42<\/p>\n
Habt ihr noch Fragen? Wollt ihr ein bestimmtes Thema angesprochen wissen? Haut in die Tasten und lasst es uns wissen!<\/p>\n
Bis dahin, viel Spa\u00df mit eurem Gambio-Shop \ud83d\ude42<\/p>\n
\n
\n
F\u00fcr aktuelle News aus der Welt des E-Commerce folge uns bei Twitter<\/strong> <\/a><\/p>\n
Selbstverst\u00e4ndlich findest du uns auch bei Facebook<\/strong> <\/a><\/p>\n<\/div>\n
Erstelle mit Gambio ganz einfach noch heute deinen eigenen Onlineshop<\/strong><\/p>\n
Mehr erfahren<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Nachdem wir im letzten Artikel zum Thema StyleEdit 3 die wichtigsten Begriffe gekl\u00e4rt 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\u00fcst – \u201cBootstrap\u201d und haben […]<\/p>\n","protected":false},"author":25,"featured_media":9123,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,154],"tags":[541,301,43,40,543,542,536],"class_list":["post-9080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","category-shopfunktionen","tag-css","tag-design","tag-e-commerce","tag-gambio","tag-mixins","tag-scss","tag-styleedit-3"],"_links":{"self":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/9080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/comments?post=9080"}],"version-history":[{"count":43,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/9080\/revisions"}],"predecessor-version":[{"id":9125,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/posts\/9080\/revisions\/9125"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/media\/9123"}],"wp:attachment":[{"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/media?parent=9080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/categories?post=9080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gambio.de\/blog\/wp-json\/wp\/v2\/tags?post=9080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}