Sass et Bootstrap 4 setup

Pour commencer, installez Sass et obtenez la dernière distribution de Bootstrap 4. La dernière version actuelle de Bootstrap est la 4.2.1. Vous aurez besoin des fichiers sources de Bootstrap 4, à ne pas confondre avec les fichiers CSS/JS compilés. Une fois que vous avez décompressé les fichiers, vous trouverez un répertoire scss.

Qu’y a-t-il dans le dossier scss ?

Le dossier Bootstrap scss contient un ensemble de fichiers .scss et aussi 2 répertoires, mixins et utilities, avec plus de code Sass. Copiez le contenu de ce dossier dans un nouveau dossier bootstrap et placez-le dans un répertoire scss sous la racine de votre projet.

my-web-project/ (root folder of your project)|-- scss/| |-- bootstrap/| | |-- mixins/| | | |-- | | |-- utilities/| | | |-- | | |-- _alert.scss| | |-- _badge.scss| | |-- _breadcrumb.scss | | |-- | | |-- _variables.scss| | |-- bootstrap-grid.scss| | |-- bootstrap-reboot.scss| | |-- bootstrap.scss

Pour convertir ces fichiers .scss en une feuille de style CSS, indiquez à Sass de compiler bootstrap.scss en bootstrap.css en exécutant la commande suivante depuis la racine de votre projet :

$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css

Vous pouvez également ajouter le drapeau –watch pour indiquer à Sass de compiler automatiquement le CSS chaque fois qu’un fichier scss a été mis à jour. Lisez le guide Sass pour plus d’informations.

Notez que :

• css est le dossier contenant le ou les fichiers CSS. Vous pouvez le nommer comme vous voulez.
• Si le dossier de sortie n’existe pas, le compilateur le créera pour vous.
• Si quelque chose ne va pas, le compilateur vous montrera ce qui s’est passé. Par exemple, cette erreur vous indique qu’un fichier .scss référencé est manquant :

Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet

Avant de commencer la phase de personnalisation, voici quelques principes importants à suivre concernant les fichiers sources Sass de Bootstrap :

• Ne modifiez pas les fichiers sources de Bootstrap, car cela rendra plus difficile la mise à niveau de votre version de Bootstrap à l’avenir.
• Le fichier bootstrap.scss contient les fichiers .scss qui doivent être compilés. Si vous jetez un coup d’œil dans ce fichier, vous verrez une liste de références @import pour récupérer de petits morceaux de Sass. En d’autres termes, c’est le fichier principal qui contrôle les composants que vous allez ajouter.
• Un autre fichier .scss important est _variables.scss. Chaque variable unique que Bootstrap utilise est définie ici, et il y en a beaucoup. Notez également que chaque variable a la chaîne « !default » à la fin, ce qui signifie que vous serez en mesure de remplacer leurs valeurs.
• _functions.scss et _mixins.scss sont les 2 autres principaux fichiers .scss au sein du code source. Ces fichiers contiennent un ensemble de fonctions et de mixins requis dont Bootstrap a besoin pour compiler les autres composants.

Ajouter vos propres fichiers de thème

Comment personnaliser Bootstrap sans modifier ses fichiers ? Tout d’abord, créez votre propre répertoire « theme » au sein du répertoire scss. Ce répertoire contiendra tous vos fichiers scss personnalisés. Deuxièmement, créez un fichier main.scss vide dans le répertoire scss. Et troisièmement, créez un nouveau fichier bootstrap-overrides.scss, également sous le répertoire scss.

À Mugo, nous préférons utiliser un dossier thème séparé pour garder les choses organisées comme ceci:

my-web-project/ (root folder of your project)|-- scss/ (scss files)| |-- bootstrap/ (Bootstrap source files)| | |-- | |-- my-theme/ (your custom scss files)| | |-- my-theme.scss| | |-- | |-- bootstrap-overrides.scss| |-- main.scss

main.scss, comme son nom l’indique, sera le fichier scss principal de votre projet. Ici, vous indiquerez à Sass ce qui doit être importé:

@import "bootstrap-overrides";@import "my-theme/my-theme";

bootstrap-overrides.scss agira comme le fichier principal bootstrap.scss. Ici, vous aurez un contrôle total sur les fichiers Bootstrap de base qui doivent être inclus, et vous pouvez également remplacer les variables du framework par défaut.

Pour commencer, vous pouvez créer bootstrap-overrides.scss comme une copie de bootstrap/bootstrap.scss, mais n’oubliez pas de mettre à jour le chemin de chaque déclaration @import puisque nous avons personnalisé la structure du répertoire scss.

/*!* Bootstrap v4.2.1 (https://getbootstrap.com/)* Copyright 2011-2018 The Bootstrap Authors* Copyright 2011-2018 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";@import "bootstrap/root";@import "bootstrap/reboot";

Mise à jour des couleurs du thème

Bootstrap utilise un tas de variables pour définir le système de couleurs du framework. Toutes ces variables sont situées dans _variables.scss:

$blue: #007bff !default;$indigo: #6610f2 !default;$purple: #6f42c1 !default;$pink: #e83e8c !default;$red: #dc3545 !default;$orange: #fd7e14 !default;$yellow: #ffc107 !default;$green: #28a745 !default;$teal: #20c997 !default;$cyan: #17a2b8 !default;$primary: $blue !default;$secondary: $gray-600 !default;$success: $green !default;$info: $cyan !default;$warning: $yellow !default;$danger: $red !default;$light: $gray-100 !default;$dark: $gray-800 !default;

Supposons que vous voulez mettre à jour la couleur primaire du thème (bleu), définissez-la dans votre fichier bootstrap-overrides.scss. La variable doit être placée avant toutes les déclarations @import.

$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";

Lorsque vous compilez le code Sass, cette nouvelle valeur de couleur $primary sera utilisée pour tout le code qui fait référence à la variable $primary.

Modifier les points d’arrêt par défaut

Les points d’arrêt de bootstrap sont également définis dans le fichier _variables.scss. Voici les valeurs par défaut :

$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);

Pour mettre à jour les points d’arrêt existants ou en ajouter de nouveaux, il suffit de surcharger la variable $grid-breakpoints en passant uniquement les clés requises.

$grid-breakpoints: (sm: 500px,xxl: 1440px);

Dans cet exemple, nous changeons la valeur du point d’arrêt « sm » à 500px (au lieu de 576px) et nous ajoutons un nouveau point d’arrêt nommé « xxl ».

En relation avec cela, il y a une autre variable importante nommée $container-max-widths qui définit la largeur maximale de la classe .container par point d’arrêt. Les valeurs par défaut sont :

sm: 540px,md: 720px,lg: 960px,xl: 1140px

Pour notre exemple, nous devons mettre à jour la valeur « sm » et en ajouter une nouvelle pour le nouveau point d’arrêt « xxl ». Sinon, la classe conteneur aura une largeur maximale de 1140px, peu importe la taille du viewport.

$container-max-widths: (sm: 480px,xxl: 1400px);

Personnaliser les règles d’espacement

Un autre grand ensemble de classes d’aide Bootstrap sont celles liées aux règles d’espacement. Les valeurs par défaut sont gérées par les variables $spacer et $spacers. Pour mettre à jour leurs valeurs par défaut, il suffit de les définir dans le fichier bootstrap-overrides.scss :

$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));

Après la compilation du code Sass, il produira le CSS suivant :

.m-0 {margin: 0 !important;}.m-1 {margin: 0.5rem !important;}.m-2 {margin: 1rem !important;}.m-3 {margin: 1.5rem !important;}.m-4 {margin: 2rem !important;}.m-5 {margin: 3rem !important;}// new one.m-6 {margin: 5rem !important;}

Profiter de certaines variables utiles

Les couleurs du thème, les points d’arrêt et les variables d’espacement ne sont que quelques-unes des variables les plus utiles du framework, mais il en existe bien d’autres. Par exemple, vous n’aimez pas le style des bordures arrondies ? Vous pouvez facilement supprimer les bordures arrondies en définissant la variable globale $enable-rounded à « false ». Sympa, non ?

Voici d’autres variables utiles qui apportent des changements simples mais puissants au CSS compilé :

$enable-caret: true !default;$enable-rounded: true !default;$enable-shadows: false !default;$enable-gradients: false !default;$enable-transitions: true !default;$enable-prefers-reduced-motion-media-query: true !default;$enable-grid-classes: true !default;$enable-print-styles: true !default;$enable-validation-icons: true !default;

• $enable-caret est utilisé pour gérer l’icône de caret affichée principalement au sein des éléments de liste déroulante. La valeur par défaut est true.
• $enable-rounded est utilisé pour gérer les bordures arrondies des éléments. Si vous affichez des bordures arrondies, vous pouvez également gérer la valeur de border-radius en surchargeant la variable $border-radius.
• $enable-shadows est utilisé pour contrôler la propriété box-shadow des boutons et des éléments de formulaire. $btn-box-shadow est la variable qui contrôle le style box-shadow.
• $enable-gradients permet d’activer des dégradés prédéfinis via les styles background-image sur divers composants.

Je recommande de consulter la page des options Bootstrap Sass et de revoir également _variables.scss pour voir tout ce que vous pouvez faire.

Utiliser seulement ce dont vous avez vraiment besoin

Et enfin, vous avez un contrôle total sur les composants Bootstrap qui doivent être inclus. S’il existe des composants et des utilitaires Bootstrap que votre site n’utilise pas, vous pouvez les exclure afin que le fichier CSS compilé soit le plus léger possible. Si vous devez utiliser les composants à l’avenir, il suffit de les décommenter.

@import "bootstrap/pagination";// @import "bootstrap/badge";// @import "bootstrap/jumbotron";@import "bootstrap/alert";// @import "bootstrap/progress";@import "bootstrap/media";@import "bootstrap/list-group";@import "bootstrap/close";// @import "bootstrap/toasts";@import "bootstrap/modal";// @import "bootstrap/tooltip";@import "bootstrap/popover";@import "bootstrap/carousel";// @import "bootstrap/spinners";@import "bootstrap/utilities";

Une fois que vous avez terminé la personnalisation, n’oubliez pas de compiler le code Sass pour créer votre fichier CSS.

$ sass scss/main.scss:css/my-theme.css

Ou encore mieux, utilisez le drapeau –watch pour que Sass compile vos fichiers scss en arrière-plan à chaque fois qu’un fichier a été mis à jour :

$ sass --watch scss/main.scss:css/my-theme.css

Qu’est-ce qui vient ensuite ?

Les étapes ci-dessus vous permettront de personnaliser Bootstrap 4 et de modifier un peu la coquille standard du framework, mais ce n’est que le début du processus de personnalisation. Votre site sera probablement reconnaissable comme un « site Bootstrap ». Chez Mugo, nous créons des sites totalement uniques selon les spécifications de conception, en offrant une expérience utilisateur agréable et des sites très performants. Le point de départ est souvent Bootstrap en utilisant les principes décrits ci-dessus, mais nous tirons davantage parti de Sass et Bootstrap en décomposant davantage nos propres éléments personnalisés, en définissant davantage une structure de fichiers et de dossiers, et en utilisant tous les mixins, utilitaires et autres éléments du framework dans nos fichiers de thème (en commençant par my-theme.scss) si nécessaire.