CSS-Variablen

Bootstrap enthält rund zwei Dutzend benutzerdefinierte CSS-Eigenschaften (Variablen) in seinem kompilierten CSS, und Dutzende weitere sind auf dem Weg zur verbesserten Anpassung pro Komponente. Diese bieten einfachen Zugriff auf häufig verwendete Werte wie unsere Designfarben, Haltepunkte und primären Schriftartenstapel, wenn Sie im Inspektor Ihres Browsers, in einer Code-Sandbox oder beim allgemeinen Prototyping arbeiten.

Allen unseren benutzerdefinierten Eigenschaften ist ein Präfix vorangestelltbs- , um Konflikte mit CSS von Drittanbietern zu vermeiden.

Root-Variablen

Hier sind die Variablen, die wir einschließen (beachten Sie, dass :rootdies erforderlich ist), auf die überall zugegriffen werden kann, wo das CSS von Bootstrap geladen ist. Sie befinden sich in unserer _root.scssDatei und sind in unseren kompilierten dist-Dateien enthalten.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

Komponentenvariablen

Wir fangen auch an, benutzerdefinierte Eigenschaften als lokale Variablen für verschiedene Komponenten zu verwenden. Auf diese Weise können wir unser kompiliertes CSS reduzieren, sicherstellen, dass Stile nicht an Orten wie verschachtelten Tabellen vererbt werden, und eine grundlegende Neugestaltung und Erweiterung von Bootstrap-Komponenten nach der Sass-Kompilierung ermöglichen.

Werfen Sie einen Blick auf unsere Tabellendokumentation, um einen Einblick in die Verwendung von CSS-Variablen zu erhalten .

Wir verwenden auch CSS-Variablen in unseren Grids – hauptsächlich für Dachrinnen –, wobei in Zukunft mehr Komponenten verwendet werden.

Beispiele

CSS-Variablen bieten eine ähnliche Flexibilität wie die Variablen von Sass, müssen jedoch nicht kompiliert werden, bevor sie dem Browser bereitgestellt werden. Hier setzen wir beispielsweise die Schriftart und die Linkstile unserer Seite mit CSS-Variablen zurück.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}