Css on besserentwickeln.de

Bootstrap Spacing

Sat, 01 Mar 2025 00:00:00 +0000

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! 🚀

SCSS - Padding und Margin verschachteln

Mon, 03 Feb 2025 00:00:00 +0000

Optimiertes SCSS-Nesting für sauberen und effizienten Code

Lerne, wie man SCSS-Nesting nutzt, um sauberere und besser strukturierte Styles zu schreiben. Der Standardansatz hält Eigenschaften organisiert, während Nesting hilft, die Übersichtlichkeit zu bewahren, indem verwandte Styles gruppiert werden. Verbessere Lesbarkeit und Wartbarkeit mit dieser einfachen SCSS-Technik! 🚀

Standard

1
2
3
4
5


.class {
 background-color: black;
 padding-top: 0.625rem;
 padding-bottom: 1.875rem;
}

Verschachtelt

1
2
3
4
5
6
7
8


.class {
 background-color: black;

 padding: {
 top: 0.625rem;
 bottom: 1.875rem;
 }
}

Beide Varianten kompilieren zum selben CSS (padding-top / padding-bottom). Die verschachtelte Schreibweise ist Sass-spezifisch (“nested properties”) und funktioniert weiterhin in Dart Sass.

Styling zum Head hinzufügen

Thu, 25 Nov 2021 00:00:00 +0000

1
2
3
4
5


const addStyle = () => {
 const style = document.createElement('style');
 document.head.append(style);
 return (styleString) => style.textContent = styleString;
})();

Icon-Farbe eines img mit src ändern

Wed, 29 Sep 2021 00:00:00 +0000

Da Hugo direktes HTML hier nicht mag. Statt des iFrames jetzt ein Link zum Codepen.

CSS :is() und :where()

Tue, 16 Mar 2021 00:00:00 +0000

Pseudoklassen, die ich häufiger verwenden sollte:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* Wählt jeden Absatz innerhalb eines header-, main-
oder footer-Elements aus, der gerade gehovert wird */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}

/* Das Obige ist gleichbedeutend mit dem Folgenden */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}

Quelle

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* Wählt jeden Absatz innerhalb eines header-, main-
 oder footer-Elements aus, der gerade gehovert wird */
:where(header, main, footer) p:hover {
 color: red;
 cursor: pointer;
}

/* Das Obige ist gleichbedeutend mit dem Folgenden */
header p:hover,
main p:hover,
footer p:hover {
 color: red;
 cursor: pointer;
}