Zum Hauptinhalt springen Zur Dokumentennavigation springen
Check
in English

Sass

Nutzen Sie unsere Sass-Quelldateien, um Variablen, Maps, Mixins und Funktionen zu nutzen, damit Sie schneller bauen und Ihr Projekt anpassen können.

Auf dieser Seite

Nutzen Sie unsere Sass-Quelldateien, um Variablen, Maps, Mixins und mehr zu nutzen.

Dateistruktur

Vermeiden Sie nach Möglichkeit, die Kerndateien von Bootstrap zu ändern. Für Sass bedeutet das, ein eigenes Stylesheet zu erstellen, das Bootstrap importiert, damit Sie es ändern und erweitern können. Angenommen, Sie verwenden einen Paketmanager wie npm, haben Sie eine Dateistruktur, die wie folgt aussieht:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Wenn Sie unsere Quelldateien heruntergeladen haben und keinen Paketmanager verwenden, sollten Sie etwas Ähnliches wie diese Struktur manuell erstellen und die Quelldateien von Bootstrap von Ihren eigenen getrennt halten.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importieren

In Ihre custom.scssimportieren Sie die Sass-Quelldateien von Bootstrap. Sie haben zwei Möglichkeiten: Schließen Sie Bootstrap vollständig ein oder wählen Sie die Teile aus, die Sie benötigen. Wir empfehlen Letzteres, beachten Sie jedoch, dass es einige Anforderungen und Abhängigkeiten zwischen unseren Komponenten gibt. Sie müssen auch etwas JavaScript für unsere Plugins einbinden.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

Mit diesem Setup können Sie beginnen, alle Sass-Variablen und -Zuordnungen in Ihrer custom.scss. Sie können auch nach Bedarf Teile von Bootstrap unter dem // OptionalAbschnitt hinzufügen. Wir empfehlen, den vollständigen Importstapel aus unserer bootstrap.scssDatei als Ausgangspunkt zu verwenden.

Variablenvorgaben

Jede Sass-Variable in Bootstrap enthält das !defaultFlag, mit dem Sie den Standardwert der Variablen in Ihrem eigenen Sass überschreiben können, ohne den Quellcode von Bootstrap zu ändern. Kopieren Sie Variablen nach Bedarf und fügen Sie sie ein, ändern Sie ihre Werte und entfernen Sie das !defaultFlag. Wenn eine Variable bereits zugewiesen wurde, wird sie nicht durch die Standardwerte in Bootstrap neu zugewiesen.

Die vollständige Liste der Bootstrap-Variablen finden Sie in scss/_variables.scss. Einige Variablen sind auf gesetzt null, diese Variablen geben die Eigenschaft nicht aus, es sei denn, sie werden in Ihrer Konfiguration überschrieben.

Variablenüberschreibungen müssen nach dem Import unserer Funktionen kommen, aber vor den restlichen Importen.

Hier ist ein Beispiel, das das background-colorund colorfür das <body>beim Importieren und Kompilieren von Bootstrap über npm ändert:

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Wiederholen Sie dies nach Bedarf für jede Variable in Bootstrap, einschließlich der globalen Optionen unten.

Starten Sie mit Bootstrap via npm mit unserem Starter-Projekt! Gehen Sie zum Vorlagen-Repository twbs/bootstrap-npm-starter , um zu erfahren , wie Sie Bootstrap in Ihrem eigenen npm-Projekt erstellen und anpassen können. Enthält Sass-Compiler, Autoprefixer, Stylelint, PurgeCSS und Bootstrap-Icons.

Karten und Schleifen

Bootstrap enthält eine Handvoll Sass-Maps, Schlüssel-Wert-Paare, die es einfacher machen, Familien verwandter CSS zu generieren. Wir verwenden Sass-Maps für unsere Farben, Grid Breakpoints und mehr. Genau wie Sass-Variablen enthalten alle Sass-Maps das !defaultFlag und können überschrieben und erweitert werden.

Einige unserer Sass-Karten werden standardmäßig zu leeren Karten zusammengeführt. Dies geschieht, um eine einfache Erweiterung einer bestimmten Sass-Karte zu ermöglichen, hat jedoch den Preis, dass das Entfernen von Gegenständen von einer Karte etwas schwieriger wird.

Karte ändern

Alle Variablen in der $theme-colorsMap sind als eigenständige Variablen definiert. Um eine vorhandene Farbe in unserer $theme-colorsKarte zu ändern, fügen Sie Folgendes zu Ihrer benutzerdefinierten Sass-Datei hinzu:

$primary: #0074d9;
$danger: #ff4136;

Später werden diese Variablen in der $theme-colorsMap von Bootstrap gesetzt:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

Zur Karte hinzufügen

Fügen Sie neue Farben zu $theme-colorsoder einer anderen Karte hinzu, indem Sie eine neue Sass-Karte mit Ihren benutzerdefinierten Werten erstellen und sie mit der ursprünglichen Karte zusammenführen. In diesem Fall erstellen wir eine neue $custom-colorsKarte und führen sie mit zusammen $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Von der Karte entfernen

Um Farben aus $theme-colorsoder einer anderen Karte zu entfernen, verwenden Sie map-remove. Beachten Sie, dass Sie $theme-colorszwischen unseren Anforderungen unmittelbar nach ihrer Definition in variablesund vor ihrer Verwendung in einfügen müssen maps:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Erforderliche Schlüssel

Bootstrap geht davon aus, dass einige spezifische Schlüssel in Sass-Maps vorhanden sind, da wir diese selbst verwendet und erweitert haben. Beim Anpassen der enthaltenen Karten können Fehler auftreten, wenn der Schlüssel einer bestimmten Sass-Karte verwendet wird.

Beispielsweise verwenden wir die Schlüssel primary, success, und von für Links, Schaltflächen und Formularzustände. Das Ersetzen der Werte dieser Schlüssel sollte keine Probleme bereiten, aber das Entfernen kann zu Sass-Kompilierungsproblemen führen. In diesen Fällen müssen Sie den Sass-Code ändern, der diese Werte verwendet.danger$theme-colors

Funktionen

Farben

Neben den Sass-Karten , die wir haben, können Themenfarben auch als eigenständige Variablen verwendet werden, wie z $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

tint-color()Mit Bootstrap's und shade-color()Funktionen können Sie Farben aufhellen oder abdunkeln . Diese Funktionen mischen Farben mit Schwarz oder Weiß, im Gegensatz zu den nativen Funktionen von Sass, lighten()die darken()die Helligkeit um einen festen Betrag ändern, was oft nicht zum gewünschten Effekt führt.

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

In der Praxis würden Sie die Funktion aufrufen und die Farb- und Gewichtsparameter übergeben.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

Farbkontrast

Um die Kontrastanforderungen der Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, müssen Autoren mit sehr wenigen Ausnahmen einen Mindestfarbkontrast von 4,5:1 für Text und einen Mindestfarbkontrast von 3:1 für Nichttext bereitstellen .

Um dabei zu helfen, haben wir die color-contrastFunktion in Bootstrap aufgenommen. Es verwendet den WCAG-Kontrastverhältnisalgorithmus zur Berechnung von Kontrastschwellenwerten basierend auf der relativen Leuchtdichte in einem sRGBFarbraum, um automatisch eine helle ( #fff), dunkle ( #212529) oder schwarze ( #000) Kontrastfarbe basierend auf der angegebenen Grundfarbe zurückzugeben. Diese Funktion ist besonders nützlich für Mixins oder Loops, bei denen Sie mehrere Klassen generieren.

Um beispielsweise Farbfelder aus unserer $theme-colorsKarte zu generieren:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

Es kann auch für einmaligen Kontrastbedarf verwendet werden:

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

Sie können auch eine Grundfarbe mit unseren Farbkartenfunktionen angeben:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Entkomme SVG

Wir verwenden die escape-svgFunktion, um die Zeichen <, >und #für SVG-Hintergrundbilder zu maskieren. Bei Verwendung der escape-svgFunktion müssen Daten-URIs in Anführungszeichen gesetzt werden.

Addieren und Subtrahieren von Funktionen

Wir verwenden die Funktionen addund subtract, um die CSS- calcFunktion zu umschließen. Der Hauptzweck dieser Funktionen besteht darin, Fehler zu vermeiden, wenn ein 0Wert ohne Einheit an einen calcAusdruck übergeben wird. Ausdrücke wie calc(10px - 0)geben in allen Browsern einen Fehler zurück, obwohl sie mathematisch korrekt sind.

Beispiel, wo die Berechnung gültig ist:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Beispiel, wo die Berechnung ungültig ist:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Mixins

Unser scss/mixins/Verzeichnis enthält eine Menge Mixins, die Teile von Bootstrap unterstützen und auch in Ihrem eigenen Projekt verwendet werden können.

Farbschemata

Ein Kurzform-Mixin für die prefers-color-schemeMedienabfrage ist mit Unterstützung für light, darkund benutzerdefinierte Farbschemata verfügbar.

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}