Bootstrap v4 Sass – Spacings erweitern

Eine großartige Funktion im CSS Framework Bootstrap v4 sind vertikale Spacings. In Version 3 gab es nichts vergleichbares und man mußte immer eigene Lösungen entwerfen.

In Bootstrap 4 gibt es berechnete Spacings, die mit Sass-Maps erstellt werden. Wenn ich dann im Frontend margin-top für eine Element benötige: mt-1. Oder mt-2…

Die Deklaration der Spacer befindet sich in Bootstrap in _variables.scss und sieht so aus:
$spacer: 1rem !default;
$spacers: (
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
) !default;

Mir waren die 5 Grundstufen zu wenig und ich benötigte mehr Platz. Allerdings rätselte ich länger über den Satz aus den Bootstrap-Docs:

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Denn die Spacing-Map wird ja direkt in den Bootstrap-Sass Files berechnet. Also funktioniert es nicht, wenn ich die !default Variablen erst im Nachhinein überschreibe. Und das steht dann auch genau so in den Docs:

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

Denn Bootrap parst aus der $spacers Map sämtliche mt, pt … CSS-Klassen-Definitionen.

So funktioniert es: In meinem Haupt-Sass File binde ich eine _variables.scss Datei ein, bevor ich Bootstrap einbinde.

In meiner eigenen Datei überschreibe ich diese Deklaration einfach:
$spacer: 1rem !default;
$spacers: (
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3),
6: ($spacer * 4.5),
7: ($spacer * 6),
8: ($spacer * 7.5),
9: ($spacer * 9),
10: ($spacer * 10)
)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.