Sass
Utilisez nos fichiers source Sass pour tirer parti des variables, des cartes, des mixins et des fonctions pour vous aider à créer plus rapidement et à personnaliser votre projet.
Utilisez nos fichiers source Sass pour tirer parti des variables, des cartes, des mixins, etc.
Structure du fichier
Dans la mesure du possible, évitez de modifier les fichiers principaux de Bootstrap. Pour Sass, cela signifie créer votre propre feuille de style qui importe Bootstrap afin que vous puissiez la modifier et l'étendre. En supposant que vous utilisez un gestionnaire de packages comme npm, vous aurez une structure de fichiers qui ressemble à ceci :
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Si vous avez téléchargé nos fichiers source et que vous n'utilisez pas de gestionnaire de packages, vous souhaiterez configurer manuellement quelque chose de similaire à cette structure, en séparant les fichiers source de Bootstrap des vôtres.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
Importation
Dans votre custom.scss, vous importerez les fichiers source Sass de Bootstrap. Vous avez deux options : inclure tout Bootstrap ou choisir les pièces dont vous avez besoin. Nous encourageons ce dernier, mais sachez qu'il existe certaines exigences et dépendances entre nos composants. Vous devrez également inclure du JavaScript pour nos plugins.
// 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";
@import "../node_modules/bootstrap/scss/root";
// 4. Include any optional Bootstrap CSS 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";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
Avec cette configuration en place, vous pouvez commencer à modifier n'importe laquelle des variables et cartes Sass dans votre custom.scss. Vous pouvez également commencer à ajouter des parties de Bootstrap dans la section // Optional selon vos besoins. Nous vous suggérons d'utiliser la pile d'importation complète de notre fichier bootstrap.scss comme point de départ.
Variables par défaut
Chaque variable Sass dans Bootstrap inclut le drapeau !default vous permettant de remplacer la valeur par défaut de la variable dans votre propre Sass sans modifier le code source de Bootstrap. Copiez et collez les variables selon vos besoins, modifiez leurs valeurs et supprimez l'indicateur !default. Si une variable a déjà été affectée, elle ne sera pas réaffectée par les valeurs par défaut dans Bootstrap.
Vous trouverez la liste complète des variables de Bootstrap dans scss/_variables.scss. Certaines variables sont définies sur null, ces variables ne génèrent pas la propriété à moins qu'elles ne soient remplacées dans votre configuration.
Les remplacements de variables doivent intervenir après l'importation de nos fonctions, mais avant le reste des importations.
Voici un exemple qui modifie la background-color et la color pour le <body> lors de l'importation et de la compilation de 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/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Répétez si nécessaire pour toute variable dans Bootstrap, y compris les options globales ci-dessous.
Cartes et boucles
Bootstrap comprend une poignée de cartes Sass, des paires clé-valeur qui facilitent la génération de familles de CSS associées. Nous utilisons les cartes Sass pour nos couleurs, les points d'arrêt de la grille, etc. Tout comme les variables Sass, toutes les cartes Sass incluent le drapeau !default et peuvent être remplacées et étendues.
Certaines de nos cartes Sass sont fusionnées en cartes vides par défaut. Ceci est fait pour permettre une expansion facile d'une carte Sass donnée, mais au prix de rendre la suppression des éléments d'une carte légèrement plus difficile.
Modifier la carte
Toutes les variables de la carte $theme-colors sont définies comme des variables autonomes. Pour modifier une couleur existante dans notre carte $theme-colors, ajoutez ce qui suit à votre fichier Sass personnalisé :
$primary: #0074d9;
$danger: #ff4136;
Later on, these variables are set in Bootstrap’s $theme-colors map:
$theme-colors: (
"primary": $primary,
"danger": $danger
);
Ajouter à la carte
Ajoutez de nouvelles couleurs à $theme-colors, ou à toute autre carte, en créant une nouvelle carte Sass avec vos valeurs personnalisées et en la fusionnant avec la carte d'origine. Dans ce cas, nous allons créer une nouvelle carte $custom-colors et la fusionner avec $theme-colors.
// Create your own map
$custom-colors: (
"custom-color": #900
);
// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);
Supprimer de la carte
Pour supprimer des couleurs de $theme-colors, ou de toute autre carte, utilisez map-remove. Sachez que vous devez l'insérer entre nos exigences et nos options :
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
Clés requises
Bootstrap suppose la présence de certaines clés spécifiques dans les cartes Sass telles que nous les utilisons et les étendons nous-mêmes. Lorsque vous personnalisez les cartes incluses, vous pouvez rencontrer des erreurs lors de l'utilisation d'une clé de carte Sass spécifique.
Par exemple, nous utilisons les clés primary, success et danger de $theme-colors pour liens, boutons et états de formulaire. Le remplacement des valeurs de ces clés ne devrait poser aucun problème, mais leur suppression peut entraîner des problèmes de compilation Sass. Dans ces cas, vous devrez modifier le code Sass qui utilise ces valeurs.
Fonctions
Couleurs
À côté des cartes Sass que nous avons, les couleurs de thème peuvent également être utilisées comme variables autonomes, comme $primaire.
.custom-element {
color: $gray-100;
background-color: $dark;
}
Vous pouvez éclaircir ou assombrir les couleurs avec les fonctions tint-color() et shade-color() de Bootstrap. Ces fonctions mélangeront les couleurs avec le noir ou le blanc, contrairement aux fonctions natives lighten() et darken() de Sass qui modifieront la luminosité d'une quantité fixe, ce qui souvent ne suffit pas. t conduire à l'effet désiré.
// 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));
}
En pratique, vous appelleriez la fonction et passeriez les paramètres de couleur et de poids.
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
Contraste des couleurs
Afin de respecter les normes d'accessibilité WCAG 2.0 pour le contraste des couleurs , les auteurs doivent fournir un taux de contraste d'au moins 4,5:1, à quelques exceptions près.
Une fonction supplémentaire que nous incluons dans Bootstrap est la fonction de contraste des couleurs, color-contrast. Il utilise l'<algorithme WCAG 2.0 pour calculer les seuils de contraste basés sur luminance relative dans un espace colorimétrique sRGB pour renvoyer automatiquement une lumière (#fff), couleur de contraste sombre (#212529) ou noire (#000) basée sur la couleur de base spécifiée. Cette fonction est particulièrement utile pour les mixins ou les boucles où vous générez plusieurs classes.
Par exemple, pour générer des échantillons de couleurs à partir de notre carte $theme-colors :
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-contrast($value);
}
}
Il peut également être utilisé pour des besoins de contraste ponctuels:
.custom-element {
color: color-contrast(#000); // returns `color: #fff`
}
You can also specify a base color with our color map functions:
.custom-element {
color: color-contrast($dark); // returns `color: #fff`
}
Svg d'évasion
Nous utilisons la fonction escape-svg pour échapper les caractères <, > et # pour Images d'arrière-plan SVG. Lors de l'utilisation de la fonction escape-svg, les URI de données doivent être entre guillemets.
Fonctions d'addition et de soustraction
Nous utilisons les fonctions add et subtract pour envelopper la fonction CSS calc. L'objectif principal de ces fonctions est d'éviter les erreurs lorsqu'un fichier “sans unité” La valeur 0 est passée dans une expression calc. Des expressions telles que calc(10px - 0) renverront une erreur dans tous les navigateurs, même si elles sont mathématiquement correctes.
Exemple où le calcul est valide :
$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);
}
Example where the calc is invalid:
$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
Notre répertoire scss/mixins/ contient une tonne de mixins qui alimentent certaines parties de Bootstrap et peuvent également être utilisés dans votre propre projet.
Schémas de couleurs
Un mixin abrégé pour la requête multimédia prefers-color-scheme est disponible avec la prise en charge des schémas de couleurs clair, dark et personnalisé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
}
}