SCSS-Spacer in Bootstrap verstehen

Beim Arbeiten mit Bootstrap ist Spacing ein entscheidender Aspekt für gut strukturierte und optisch ansprechende Layouts. Bootstrap bietet ein flexibles System zur Handhabung von Abständen mithilfe von SCSS-Variablen. In diesem Artikel schauen wir uns die SCSS-Spacer in Bootstrap an, wie sie funktionieren und wie du sie effektiv einsetzen kannst.

Was sind SCSS-Spacer?

Spacer in Bootstrap sind vordefinierte Werte für Margins (m-*-Klassen) und Paddings (p-*-Klassen). Diese Werte basieren auf der Variable $spacer und ermöglichen ein konsistentes Spacing-System im gesamten Projekt.

So definiert Bootstrap den Basis-Spacer:

1

$spacer: 1rem !default; // Standard-Spacer (bei 16px Root-Font-Size also 16px)

Alle weiteren Abstufungen leitet Bootstrap daraus in der $spacers-Map ab. Eigene Variablen wie $spacer-lg oder $spacer-sm gibt es in Bootstrap nicht – man arbeitet direkt mit $spacer (bzw. Vielfachen davon) und der Map.

Bootstraps $spacers-Map

Bootstrap nutzt außerdem eine SCSS-Map, um Spacing-Werte dynamisch zu definieren. So sieht das aus:

1
2
3
4
5
6
7
8

$spacers: (
  0: 0,
  1: $spacer * .25,  // 0.25rem (4px)
  2: $spacer * .5,   // 0.5rem  (8px)
  3: $spacer,        // 1rem    (16px)
  4: $spacer * 1.5,  // 1.5rem  (24px)
  5: $spacer * 3,    // 3rem    (48px)
) !default;

Diese Map ermöglicht es Bootstrap, Utility-Klassen zu erzeugen wie:

• .m-1 → margin: .25rem; (4px)
• .p-3 → padding: 1rem; (16px)
• .m-5 → margin: 3rem; (48px)

Wie man Bootstrap-Spacer in SCSS verwendet

1. $spacer direkt verwenden

Du kannst den $spacer (bzw. Vielfache davon) direkt in deinen Styles verwenden:

1
2
3
4

.my-section {
  padding: $spacer * 2;      // 2rem (32px)
  margin-bottom: $spacer * .5; // 0.5rem (8px)
}

2. map-get verwenden, um Spacing-Werte abzurufen

Um Werte dynamisch aus der $spacers-Map zu holen, nutzt man map-get:

1
2
3

.my-box {
  padding: map-get($spacers, 3); // Entspricht $spacer (16px)
}

3. Dynamische Spacing-Klassen generieren

Du kannst eine Schleife erstellen, um eigene Spacing-Utility-Klassen zu generieren:

1
2
3
4
5
6
7
8

@each $key, $value in $spacers {
  .custom-m-#{$key} {
    margin: $value;
  }
  .custom-p-#{$key} {
    padding: $value;
  }
}

Das erzeugt:

1
2

.custom-m-1 { margin: 0.25rem; }
.custom-p-3 { padding: 1rem; }

Warum SCSS-Spacer verwenden?

• Konsistenz – Sorgt für einheitliches Spacing im gesamten Projekt.
• Anpassbarkeit – Du kannst die $spacer-Werte an dein Designsystem anpassen.
• Effizienz – Reduziert repetitiven Code und verbessert die Wartbarkeit.

Fazit

SCSS-Spacer in Bootstrap bieten eine leistungsstarke Möglichkeit, Abstände effizient zu verwalten. Durch die Verwendung vordefinierter Variablen und Maps kannst du ein konsistentes Design beibehalten und gleichzeitig dein CSS sauber und skalierbar halten. Egal ob direkt in SCSS oder über Bootstraps Utility-Klassen genutzt – Spacer helfen dabei, deinen Layout-Workflow zu vereinfachen.

Brauchst du ein individuelleres Spacing-System? Passe die $spacer-Variable an die Anforderungen deines Projekts an und erstelle deine eigenen Spacing-Utilities! 🚀