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 Schriftstapel, 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-black: #000;
  --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", "Noto Sans", "Liberation Sans", Arial, 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;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Komponentenvariablen

Bootstrap 5 nutzt zunehmend benutzerdefinierte Eigenschaften als lokale Variablen für verschiedene Komponenten. Auf diese Weise reduzieren wir unser kompiliertes CSS, stellen sicher, dass Stile nicht an Orten wie verschachtelten Tabellen vererbt werden, und ermöglichen eine grundlegende Neugestaltung und Erweiterung von Bootstrap-Komponenten nach der Sass-Kompilierung.

Werfen Sie einen Blick auf unsere Tabellendokumentation, um einen Einblick in die Verwendung von CSS-Variablen zu erhalten . Unsere Navigationsleisten verwenden ab v5.2.0 auch CSS-Variablen . Wir verwenden auch CSS-Variablen in unseren Grids – hauptsächlich für Dachrinnen, das neue Opt-in-CSS-Grid –, wobei in Zukunft mehr Komponenten verwendet werden.

Wann immer möglich, weisen wir CSS-Variablen auf Basiskomponentenebene zu (z. B. .navbarfür die Navigationsleiste und ihre Unterkomponenten). Dies reduziert das Raten darüber, wo und wie angepasst werden soll, und ermöglicht einfache Änderungen durch unser Team in zukünftigen Updates.

Präfix

Die meisten CSS-Variablen verwenden ein Präfix, um Kollisionen mit Ihrer eigenen Codebasis zu vermeiden. Dieses Präfix ist zusätzlich zu dem --, das für jede CSS-Variable erforderlich ist.

Passen Sie das Präfix über die $prefixSass-Variable an. Standardmäßig ist es auf eingestellt bs-(beachten Sie den abschließenden Bindestrich).

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.