Sass

Gebruik onze Sass-bronbestanden om te profiteren van variabelen, kaarten, mixins en functies om u te helpen sneller te bouwen en uw project aan te passen.

Op deze pagina

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

Bestandsstructuur

Vermijd waar mogelijk het wijzigen van de kernbestanden van Bootstrap. Voor Sass betekent dat het maken van uw eigen stylesheet die Bootstrap importeert, zodat u deze kunt wijzigen en uitbreiden. Ervan uitgaande dat u een pakketbeheerder zoals npm gebruikt, heeft u een bestandsstructuur die er als volgt uitziet:

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

Als je onze bronbestanden hebt gedownload en geen pakketbeheerder gebruikt, moet je handmatig iets maken dat lijkt op die structuur, waarbij je de bronbestanden van Bootstrap gescheiden houdt van die van jezelf.

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

Importeren

In uw custom.scss, importeert u de Sass-bronbestanden van Bootstrap. Je hebt twee opties: voeg alle Bootstrap toe, of kies de onderdelen die je nodig hebt. We moedigen het laatste aan, maar houd er rekening mee dat er enkele vereisten en afhankelijkheden zijn tussen onze componenten. U moet ook wat JavaScript toevoegen voor onze plug-ins.

// 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

Met die opstelling kunt u beginnen met het wijzigen van alle Sass-variabelen en -kaarten in uw custom.scss. U kunt indien nodig ook beginnen met het toevoegen van delen van Bootstrap onder de // Optionalsectie. We raden aan om de volledige importstack uit ons bootstrap.scssbestand als startpunt te gebruiken.

Standaardwaarden van variabelen

Elke Sass-variabele in Bootstrap bevat de !defaultvlag waarmee u de standaardwaarde van de variabele in uw eigen Sass kunt overschrijven zonder de broncode van Bootstrap te wijzigen. Kopieer en plak variabelen indien nodig, wijzig hun waarden en verwijder de !defaultvlag. Als een variabele al is toegewezen, wordt deze niet opnieuw toegewezen door de standaardwaarden in Bootstrap.

U vindt de volledige lijst met Bootstrap-variabelen in scss/_variables.scss. Sommige variabelen zijn ingesteld op null, deze variabelen voeren de eigenschap niet uit, tenzij ze worden overschreven in uw configuratie.

Variabele overschrijvingen moeten komen nadat onze functies zijn geïmporteerd, maar vóór de rest van de import.

Hier is een voorbeeld dat de background-coloren colorvoor de verandert <body>bij het importeren en compileren van Bootstrap via npm:

// 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

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

Ga aan de slag met Bootstrap via npm met ons startersproject! Ga naar de twbs/bootstrap-npm-starter sjabloonrepository om te zien hoe u Bootstrap in uw eigen npm-project kunt bouwen en aanpassen. Bevat Sass-compiler, Autoprefixer, Stylelint, PurgeCSS en Bootstrap-pictogrammen.

Kaarten en lussen

Bootstrap bevat een handvol Sass-kaarten, sleutelwaardeparen die het gemakkelijker maken om families van gerelateerde CSS te genereren. We gebruiken Sass-kaarten voor onze kleuren, rasteronderbrekingspunten en meer. Net als Sass-variabelen, bevatten alle Sass-kaarten de !defaultvlag en kunnen ze worden overschreven en uitgebreid.

Sommige van onze Sass-kaarten zijn standaard samengevoegd tot lege. Dit wordt gedaan om een bepaalde Sass-kaart gemakkelijk uit te breiden, maar gaat ten koste van het iets moeilijker maken van het verwijderen van items van een kaart.

Wijzig kaart

Alle variabelen in de $theme-colorskaart zijn gedefinieerd als op zichzelf staande variabelen. Om een bestaande kleur in onze $theme-colorskaart te wijzigen, voegt u het volgende toe aan uw aangepaste Sass-bestand:

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

Later worden deze variabelen ingesteld op de $theme-colorskaart van Bootstrap:

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

Toevoegen aan kaart

Voeg nieuwe kleuren toe aan $theme-colors, of een andere kaart, door een nieuwe Sass-kaart te maken met uw aangepaste waarden en deze samen te voegen met de originele kaart. In dit geval zullen we een nieuwe $custom-colorskaart maken en deze samenvoegen met $theme-colors.

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

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

Van kaart verwijderen

Gebruik om kleuren van $theme-colors, of een andere kaart te verwijderen map-remove. Houd er rekening mee dat u tussen onze vereisten moet invoegen $theme-colorsnet na de definitie in variablesen vóór het gebruik ervan in 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

Vereiste sleutels

Bootstrap veronderstelt de aanwezigheid van enkele specifieke sleutels binnen Sass-kaarten zoals we deze zelf gebruikten en uitbreiden. Als u de meegeleverde kaarten aanpast, kunt u fouten tegenkomen wanneer de sleutel van een specifieke Sass-kaart wordt gebruikt.

We gebruiken bijvoorbeeld de primary, success, en dangertoetsen van $theme-colorsvoor links, knoppen en formulierstatussen. Het vervangen van de waarden van deze sleutels zou geen problemen moeten opleveren, maar het verwijderen ervan kan Sass-compilatieproblemen veroorzaken. In deze gevallen moet u de Sass-code wijzigen die gebruikmaakt van die waarden.

Functies

Kleuren

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

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

U kunt kleuren lichter of donkerder maken met Bootstrap's tint-color()en shade-color()functies. Deze functies zullen kleuren mengen met zwart of wit, in tegenstelling tot Sass' native lighten()en darken()functies die de lichtheid met een vaste hoeveelheid zullen veranderen, wat vaak niet tot het gewenste effect leidt.

// 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 de praktijk zou je de functie aanroepen en de kleur- en gewichtsparameters doorgeven.

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

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

Kleurcontrast

Om te voldoen aan de contrastvereisten 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 enkele uitzonderingen na.

Om hierbij te helpen, hebben we de color-contrastfunctie in Bootstrap opgenomen. Het gebruikt het WCAG-algoritme voor contrastverhouding voor het berekenen van contrastdrempels op basis van relatieve luminantie in een sRGBkleurruimte om automatisch een lichte ( #fff), donkere ( #212529) of zwarte ( #000) contrastkleur te retourneren op basis van de opgegeven basiskleur. Deze functie is vooral handig voor mixins of loops waarin u meerdere klassen genereert.

Om bijvoorbeeld kleurstalen van onze $theme-colorskaart te genereren:

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

Het kan ook worden gebruikt voor eenmalige contrastbehoeften:

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

U kunt ook een basiskleur specificeren met onze kleurenkaartfuncties:

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

Ontsnap aan SVG

We gebruiken de escape-svgfunctie om te ontsnappen aan de tekens <, >en #voor SVG-achtergrondafbeeldingen. Bij gebruik van de escape-svgfunctie moeten gegevens-URI's worden aangehaald.

Functies optellen en aftrekken

We gebruiken de adden subtractfuncties om de CSS- calcfunctie in te pakken. Het primaire doel van deze functies is om fouten te voorkomen wanneer een "eenheidloze" 0waarde wordt doorgegeven aan een calcuitdrukking. Uitdrukkingen zoals calc(10px - 0)geven een foutmelding in alle browsers, ondanks dat ze wiskundig correct zijn.

Voorbeeld waarbij de calc geldig is:

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

Voorbeeld waarbij de calc ongeldig is:

$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

Onze scss/mixins/directory heeft een heleboel mixins die delen van Bootstrap aandrijven en die ook voor uw eigen project kunnen worden gebruikt.

Kleurenschema's

Een verkorte mixin voor de prefers-color-schememediaquery is beschikbaar met ondersteuning voor light, dark, en aangepaste kleurenschema's.

@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
  }
}