Zum Hauptinhalt springen Zur Dokumentennavigation springen
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 einrichten 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";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@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";

// 5. 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/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@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 jeder 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 es zwischen unseren Anforderungen und Optionen einfügen müssen:

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

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

// Optional
@import "../node_modules/bootstrap/scss/root";
@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;
}

Sie können Farben mit Bootstrap's tint-color()und shade-color()-Funktionen 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 Barrierefreiheitsstandards der WCAG 2.0 für Farbkontraste zu erfüllen, müssen Autoren mit sehr wenigen Ausnahmen ein Kontrastverhältnis von mindestens 4,5:1 bereitstellen .

Eine zusätzliche Funktion, die wir in Bootstrap integrieren, ist die Farbkontrastfunktion, color-contrast. Es verwendet den WCAG 2.0-Algorithmus zur Berechnung von Kontrastschwellenwerten basierend auf der relativen Leuchtdichte in einem Farbraum, um basierend auf der angegebenen Grundfarbe sRGBautomatisch eine helle ( #fff), dunkle ( #212529) oder schwarze ( ) Kontrastfarbe zurückzugeben. #000Diese Funktion ist besonders nützlich für Mixins oder Loops, bei denen Sie mehrere Klassen generieren.

Um beispielsweise Farbmuster 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
  }
}