Bootstrap 5.2 / Aanpassen

Sass

Gebruik onze Sass-bronbestanden om te profiteren van variabelen, maps, mixins en functies die je helpen sneller te bouwen en je project aan te passen.

Gebruik onze Sass-bronbestanden om te profiteren van variabelen, maps, mixins en meer.

Bestandsstructuur

Vermijd waar mogelijk het aanpassen van de kernbestanden van Bootstrap. Voor Sass betekent dat: maak je eigen stylesheet die Bootstrap importeert, zodat je het kunt aanpassen en uitbreiden. Als je een package manager als npm gebruikt, krijg je een bestandsstructuur die er zo uitziet:

TEXT

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

Heb je onze bronbestanden gedownload en gebruik je geen package manager, dan maak je handmatig iets vergelijkbaars aan, waarbij je de bronbestanden van Bootstrap gescheiden houdt van je eigen bestanden.

TEXT

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

Importeren

In je custom.scss importeer je de Sass-bronbestanden van Bootstrap. Je hebt twee opties: heel Bootstrap opnemen, of alleen de onderdelen kiezen die je nodig hebt. We raden het laatste aan, maar houd er rekening mee dat er tussen onze componenten een aantal vereisten en afhankelijkheden bestaan. Voor onze plugins moet je bovendien wat JavaScript opnemen.

SCSS

// Custom.scss
// Optie A: heel Bootstrap opnemen

// Zet eventuele overrides van standaardvariabelen hier (al zijn functies dan nog niet beschikbaar)

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

// Voeg daarna hier extra eigen code toe

SCSS

// Custom.scss
// Optie B: onderdelen van Bootstrap opnemen

// 1. Neem eerst de functions op (zodat je kleuren, SVG's, calc enz. kunt bewerken)
@import "../node_modules/bootstrap/scss/functions";

// 2. Zet eventuele overrides van standaardvariabelen hier

// 3. Neem de rest van de verplichte Bootstrap-stylesheets op
@import "../node_modules/bootstrap/scss/variables";

// 4. Zet eventuele overrides van standaard-maps hier

// 5. Neem de rest van de verplichte onderdelen op
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Neem naar behoefte optioneel andere onderdelen op
@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. Neem optioneel de utilities-API als laatste op om klassen te genereren op basis van de Sass-map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Voeg hier extra eigen code toe

Met die opzet kun je alle Sass-variabelen en -maps in je custom.scss gaan aanpassen. Je kunt ook naar behoefte onderdelen van Bootstrap onder het kopje // Optional toevoegen. We raden aan de volledige importstack uit ons bestand bootstrap.scss als uitgangspunt te gebruiken.

Standaardwaarden van variabelen

Elke Sass-variabele in Bootstrap heeft de vlag !default, waardoor je de standaardwaarde van de variabele in je eigen Sass kunt overschrijven zonder de broncode van Bootstrap aan te passen. Kopieer en plak variabelen naar behoefte, pas hun waarden aan en verwijder de vlag !default. Als een variabele al is toegekend, wordt hij niet opnieuw toegekend door de standaardwaarden in Bootstrap.

De volledige lijst met variabelen van Bootstrap vind je in scss/_variables.scss. Sommige variabelen staan op null; die variabelen geven de eigenschap niet uit tenzij ze in jouw configuratie worden overschreven.

Variabele-overrides moeten ná het importeren van onze functions komen, maar vóór de rest van de imports.

Hier is een voorbeeld dat de background-color en color voor de <body> wijzigt bij het importeren en compileren van Bootstrap via npm:

SCSS

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

// Overrides van standaardvariabelen
$body-bg: #000;
$body-color: #111;

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

// Hier optionele Bootstrap-componenten
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// enz.

Herhaal dit zo nodig voor elke variabele in Bootstrap, inclusief de globale opties hieronder.

Let op

Wil je meteen bouwen in plaats van losse bestanden downloaden? Het officiële Bootstrap npm-starterproject bevat een kant-en-klare Sass-opzet en een lokale server.

Maps en loops

Bootstrap bevat een handvol Sass-maps: sleutel-waardeparen die het eenvoudiger maken om families van verwante CSS te genereren. We gebruiken Sass-maps voor onze kleuren, grid-breakpoints en meer. Net als Sass-variabelen hebben alle Sass-maps de vlag !default en kunnen ze worden overschreven en uitgebreid.

Sommige van onze Sass-maps worden standaard met lege maps samengevoegd. Dat is gedaan om een bepaalde Sass-map eenvoudig te kunnen uitbreiden, maar het maakt het verwijderen van items uit een map wel iets lastiger.

Map aanpassen

Alle variabelen in de $theme-colors-map zijn als losstaande variabelen gedefinieerd. Om een bestaande kleur in onze $theme-colors-map aan te passen, voeg je het volgende toe aan je eigen Sass-bestand:

SCSS

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

Verderop worden deze variabelen in de $theme-colors-map van Bootstrap gezet:

SCSS

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

Toevoegen aan een map

Voeg nieuwe kleuren toe aan $theme-colors, of aan een andere map, door een nieuwe Sass-map met je eigen waarden te maken en die met de originele map samen te voegen. In dit geval maken we een nieuwe $custom-colors-map en voegen we die samen met $theme-colors.

SCSS

// Maak je eigen map
$custom-colors: (
  "custom-color": #900
);

// Voeg de maps samen
$theme-colors: map-merge($theme-colors, $custom-colors);

Verwijderen uit een map

Gebruik map-remove om kleuren uit $theme-colors, of uit een andere map, te verwijderen. Let op: je moet $theme-colors tussen onze verplichte imports plaatsen, direct na de definitie ervan in variables en vóór het gebruik ervan in maps:

SCSS

// Verplicht
@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";

// Optioneel
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// enz.

Verplichte sleutels

Bootstrap gaat uit van de aanwezigheid van een aantal specifieke sleutels binnen Sass-maps, omdat we die zelf gebruiken en uitbreiden. Wanneer je de meegeleverde maps aanpast, kun je fouten tegenkomen op plekken waar een specifieke sleutel van een Sass-map wordt gebruikt.

Zo gebruiken we de sleutels primary, success en danger uit $theme-colors voor links, knoppen en formulier-states. De waarden van deze sleutels vervangen zou geen problemen moeten opleveren, maar ze verwijderen kan compilatieproblemen in Sass veroorzaken. In die gevallen moet je de Sass-code aanpassen die van die waarden gebruikmaakt.

Functies

Kleuren

Naast de Sass-maps die we hebben, kunnen themakleuren ook als losstaande variabelen worden gebruikt, zoals $primary.

SCSS

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

Je kunt kleuren lichter of donkerder maken met de functies tint-color() en shade-color() van Bootstrap. Deze functies mengen kleuren met zwart of wit, anders dan Sass' eigen functies lighten() en darken(), die de lichtheid met een vast bedrag wijzigen — wat vaak niet tot het gewenste effect leidt.

Standaardwaarden: zie scss/_functions.scss in de Bootstrap-broncode.

In de praktijk roep je de functie aan en geef je de kleur- en gewichtsparameters mee.

SCSS

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

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

Kleurcontrast

Om te voldoen aan de contrasteisen van de Web Content Accessibility Guidelines (WCAG) moeten auteurs een minimaal tekstkleurcontrast van 4.5:1 en een minimaal niet-tekstkleurcontrast van 3:1 bieden, op een paar uitzonderingen na.

Om daarbij te helpen hebben we de functie color-contrast in Bootstrap opgenomen. Die gebruikt het WCAG-algoritme voor contrastverhouding om contrastdrempels te berekenen op basis van relatieve luminantie in een sRGB-kleurruimte, en geeft op basis van de opgegeven basiskleur automatisch een lichte (#fff), donkere (#212529) of zwarte (#000) contrastkleur terug. Deze functie is vooral handig bij mixins of loops waarin je meerdere klassen genereert.

Om bijvoorbeeld kleurstalen te genereren uit onze $theme-colors-map:

SCSS

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

Hij kan ook worden gebruikt voor eenmalige contrastbehoeften:

SCSS

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

Je kunt ook een basiskleur opgeven met onze kleurmap-functies:

SCSS

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

SVG escapen

We gebruiken de functie escape-svg om de tekens <, > en # voor SVG-achtergrondafbeeldingen te escapen. Bij gebruik van de functie escape-svg moeten data-URI's tussen aanhalingstekens staan.

De functies add en subtract

We gebruiken de functies add en subtract als omhulsel om de CSS-functie calc. Het belangrijkste doel van deze functies is fouten te voorkomen wanneer een 0-waarde "zonder eenheid" aan een calc-expressie wordt meegegeven. Expressies als calc(10px - 0) leveren in alle browsers een fout op, ook al kloppen ze wiskundig gezien.

Voorbeeld waarin de calc geldig is:

SCSS

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

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

.element {
  // Levert dezelfde calc(.25rem - 1px) op als hierboven
  border-radius: subtract($border-radius, $border-width);
}

Voorbeeld waarin de calc ongeldig is:

SCSS

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

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

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

Mixins

Onze map scss/mixins/ bevat een berg mixins die onderdelen van Bootstrap aandrijven en die je ook in je eigen project kunt gebruiken.

Kleurschema's

Er is een beknopte mixin voor de media query prefers-color-scheme beschikbaar, met ondersteuning voor light, dark en eigen kleurschema's.

Standaardwaarden: zie scss/mixins/_color-scheme.scss in de Bootstrap-broncode.

SCSS

.custom-element {
  @include color-scheme(dark) {
    // Zet hier stijlen voor de donkere modus
  }

  @include color-scheme(custom-named-scheme) {
    // Zet hier stijlen voor een eigen kleurschema
  }
}