CSS-Variablen

Bootstrap enthält viele benutzerdefinierte CSS-Eigenschaften (Variablen) in seinem kompilierten CSS für die Anpassung in Echtzeit, ohne dass Sass neu kompiliert werden muss. 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-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --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-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --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));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

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);
}

Grid Breakpoints

Obwohl wir unsere Grid-Breakpoints als CSS-Variablen (mit Ausnahme von xs) einfügen, sollten Sie sich bewusst sein, dass CSS-Variablen in Medienabfragen nicht funktionieren . Dies ist in der CSS-Spezifikation für Variablen beabsichtigt, kann sich jedoch in den kommenden Jahren mit der Unterstützung von env()Variablen ändern. In dieser Stack Overflow -Antwort finden Sie einige hilfreiche Links. In der Zwischenzeit können Sie diese Variablen in anderen CSS-Situationen sowie in Ihrem JavaScript verwenden.