NEU: Entdecke unser neuestes Contao Theme LASR mehr erfahren

Warum wir die Hälfte unserer SASS-Mixins wieder entfernten

von

Für unser Contao Basis-Framework Nutshell haben wir in den letzten Wochen eine Vielzahl von nützlichen SASS Mixins zusammengestellt. In diesem Artikel erfährst du, warum wir etwa die Hälfte der Mixins wieder entfernt haben.

Mit den richtigen SASS Mixins kann man sich das Frontend-Entwickler-Leben um einiges leichter machen. Aber auch schwerer, wie wir vor kurzem feststellten. Alles fing damit an, dass wir für unser Contao-Theme auf die Einheit REM setzen wollten, d.h. der Großteil unserer Größen, Abstände usw. sollte relativ zur „Basis-Schriftgröße“ sein.

Das Problem: REM wird erst ab dem IE 9 unterstützt. Und obwohl unser Theme den IE 8 und darunter offiziell nicht unterstützt, so komplett zerschossen soll die Website dann ja auch nicht sein. Wir brauchten ein Pixel-Fallback und SASS Mixins schienen wie gemacht dafür zu sein, dass neben den Anweisungen mit REM-Werten auch gleich noch ein Pixel-Fallback hinzugefügt wurde.

Hier ein Beispiel wie diese Mixins zu Anfang aussahen:

/* $number = Number without Unit */
@mixin margin-bottom($number) {
margin-bottom: #{$number * $base-font-size}; /* Pixel Fallback */
margin-bottom: #{$number + 'rem'};
}

Natürlich durften auch Mixins für margin-top, -left, und -right nicht fehlen. Dann noch ein paar Mixins für padding, eines für Schriftgrößen usw. Es kamen also schon ein paar Mixins zusammen.

Außerdem kam uns noch der Gedanke, dass es vielleicht für den ein oder anderen sinnvoll ist, die Werte wie gewohnt in Pixeln zu übergeben und sich dann die „krummen“ REM-Werte berechnen zu lassen. Dank unseres Mixins kein Problem:

@mixin margin-bottom($number) {

@if (unit($number) == "") {
margin-bottom: #{$number * $base-font-size};
margin-bottom: #{$number + 'rem'};
}

@if (unit($number) == "px") {
margin-bottom: #{$number};
margin-bottom: #{$number / $base-font-size + 'rem'};
}
}

Das funktionierte bei einer Anweisung wie margin-bottom noch recht problemlos, nicht jedoch beim margin-Mixin. Hier wurden nun plötzlich eine Vielzahl von If-Abfragen nötig, um alle Richtungen zu berücksichtigen und um zu gucken, ob ein Wert übergeben werden würde. Aber wofür eigentlich?

Ach ja, damit wir statt

margin: 16px 8px;
margin: 1rem 0.5rem;

nur

@include margin(1,0.5);

schreiben müssten. Aber dafür der Aufwand?

An diesem Tag beschlossen wir, auf eine Vielzahl von Mixins zu verzichten und wären zur Not auch bereit gewesen, die Extra-Zeile für das Pixel-Fallback zu schreiben, hätten wir nicht das CSS post-processor Plugin gulp-pixrem gefunden, dass uns diese Arbeit abnimmt.

Außerdem legten wir für uns fest, wann der Einsatz eines Mixins sinnvoll sein könnte:

  • nicht für Fallbacks (machen wir über gulp)
  • nicht für Prefixes (machen wir über gulp)
  • nicht für Browserhacks, da die Dokumentation nicht in der betroffenen Datei stattfindet 
  • Mixin sollte mindestens 3 CSS-Anweisungen generieren

Zurück

Kommentare

Einen Kommentar schreiben

Bitte rechnen Sie 3 plus 9.