Artikel
0 Kommentare

Verwendung des lib-css() Less Mixin in Magento 2

Screenshot Magento 2 Less Mixin .lib-css()

Das Less-Mixin .lib-css() aus der UI-Bibliothek erstellt Vendor-Prefixes für CSS-Eigenschaften. Neben dem Autoprefixing gibt es noch einen weiteren Nutzen.

Inhalt

  1. Magento Frontend-Toolbox
  2. Autoprefixing mit .lib-css()
  3. CSS ist (nicht) ganz einfach
  4. Deklarationen ausschalten

Die Frontend-Toolbox von Magento 2

In der Standardinstallation kommt Magento 2 mit einer Bibliothek für UI-Komponenten. Diese Komponenten werden im Blank-Theme genutzt und können natürlich auch für eigene Themes verwendet werden.

Im Wesentlichen besteht die Bibliothek aus Less-Mixins und vielen Variablen, mit denen sich die Komponenten und somit das Frontend leicht anpassen lassen. Zur Kompilierung des CSS aus den Less-Dateien verwendet Magento den Task-Runner Grunt.

Autoprefixing mit .lib-css()

Hauptnutzen des Mixins .lib-css() aus der Magento Frontend-Bibliothek ist die Deklaration von Vendor-Prefixes für neuere CSS-Regeln. Das Mixin generiert die Prefixes für die Browser von Microsoft (-ms-), Mozilla Firefox (-moz-) und Webkit-Browser (-webkit-), wie Chrome und Safari.

Beispiel für die Anwendung

// Less
.element {
.lib-css(font-size-adjust, 100%);
}

generiert daraus:

// CSS
.element {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size-adjust: 100%;
}

CSS ist (nicht) ganz einfach

Die größten Herausforderungen bei der Arbeit mit CSS sind die Punkte Organisation und Architektur. Insbesondere bei großen Projekten, mit vielen Entwicklern, kann eine schlecht durchdachte CSS-Systematik dazu führen, dass die Arbeit kompliziert wird und sich zäh wie alter Kaugummi gestaltet (!important anyone?).

Wenn jeder budgetgetriebene Entwickler sein CSS nur noch auf die wackelige Architektur oben drauf packt, will irgendwann keiner mehr das Projekt auf seinem Schreibtisch sehen.

Preprozessoren wie Less und Sass erleichtern einem die Arbeit seit einigen Jahren deutlich, verleiten aber dazu, sich das eigentliche Produkt CSS kaum noch anzusehen.

Das Blank-Theme von Magento ist leider alles andere als „Blank”. Frisch installiert kommt es auf stolze 14.000 Zeilen CSS! Zu diesem Thema schreibe ich mit Sicherheit noch einen eigenen Artikel.

Sprich, alles was uns hilft unser CSS schlank und übersichtlich zu halten, ist sehr willkommen. Und hier kommt wieder unser Mixin ins Spiel.

Deklarationen ausschalten

Wenn wir mit Hilfe des Mixins .lib-css() samt Variablen Eigenschaften für unsere Elemente festlegen, wird daraus das CSS generiert:

// Less
@heading__font-family__base: Roboto;
@primary-color: blue;
h1 {
color: @primary-color;
.lib-css(font-family, @heading__font-family__base);
}
// CSS
h1 {
color: blue;    
font-family: Roboto;
}

Wenn wir nun die Variable „@heading__font-family__base“ auf „false“ setzen, wird diese Eigenschaft  gar nicht erst generiert:

// Less
@heading__font-family__base: false;
@primary-color: blue;
h1 {
color: @primary-color;
.lib-css(font-family, @heading__font-family__base);
}
// CSS
h1 {
color: blue; 
}

Somit können wir Eigenschaften nicht nur mittels Variablen projektübergreifend steuern, sondern auch bei Bedarf jederzeit ausschalten. Das ist bei komplexen Magento-Projekten an der einen oder anderen Stelle sehr hilfreich.

Verwendung des lib-css() Less Mixin in Magento 2
4 (80%) 1 vote

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.