Personnaliser Bootstrap 4 avec Sass

En cette fin du mois d’août, le monde du CSS a vu l’arrivée de la version alpha de Bootstrap 4. Le grand changement technique de cette version est qu’elle a délaissé le pré-processeur Less pour se reposer sur Sass. Cette nouvelle est réjouissante tout d’abord car Sass est aujourd’hui devenu plus populaire que Less chez les frontend dev, mais ça l’est surtout car ce dernier est plus performant en compilation grâce à Libsass et nous permettra ici de personnaliser facilement les styles.

Améliorations de la v4

Du côté des améliorations du framework, on notera entre autres :

le support de flexbox
le passage aux unités rem
de nouveaux composants avec l’intégration de WTF Forms
la modification de composants existants comme par exemple les .panel et .well qui sont à présent des .card
…

Pour la liste complète des améliorations, je vous laisse vous référer à la doc officielle.

Pour ce qui est des compatibilités, le support de IE8 a été abandonné, ce qui nous permet de passer à jQuery 2.x et ainsi gagner en performances.

Customisation avec Sass

Pour les utilisateurs de Sass, le point le plus pratique de cette migration de Less à Sass est qu’il permettra de personnaliser votre mouture de bootstrap en redéfinissant très simplement le partial des variables. En effet, toutes les variables sont affectées avec le suffix !default; , ce qui signifie que l’affectation se fera uniquement si la variable n’a pas déjà été initialisée. On peut donc créer notre propre fichier de variables qui sera importé dans le fichier final avant les modules de bootstrap. Ainsi, lors du traitement du partial de variables de bootstrap, les propriétés que nous avons déjà initialisée ne seront pas écrasées par celle de bootstrap.

Dans la théorie

Il est possible de regrouper nos librairies externes dans un fichier external.css de la manière suivante :

Télécharger le framework bootstrap
Copier le partial des variables dans notre projet afin de le personnaliser (ici nommé : _variables_btstrp.scss)
Créer le fichier external.scss qui va générer notre CSS de librairie
Importer notre partial de variables personnalisées
Importer Bootstrap dans sa totalité via le fichier central bootstrap.scss ou en choisissant les modules désirés

// Personnalisation des styles via les variables
@import "partials/_variables_btstrp";
// Import du Framework
@import "../libs/bootstrap/scss/bootstrap";

La logique de programmation voudrait que la dernière affectation de variables soit celle prise en compte. Ce serait donc les variables bootstrap importées par le fichier bootstrap.scss qui compteraient. Mais comme chaque affectation contient le suffix !default; , seule la première affectation sera décisive, c’est à dire celle définie dans notre partial personnalisé.

De plus, cette technique permet de ne pas toucher au code du framework, ce qui est une mauvaise pratique car rendant difficile la mise-à-jour de librairies.

Concrètement dans le code

Variables bootstrap

Fichier _variables.scss de la librairie bootstrap à ne pas modifier :

// https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.2/scss/_variables.scss
//
// Colors
//
// Grayscale and brand colors for use across Bootstrap.

$gray-dark:                 #373a3c !default;
$gray:                      #55595c !default;
$gray-light:                #818a91 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;

$brand-primary:             #0275d8 !default;
$brand-success:             #5cb85c !default;
$brand-info:                #5bc0de !default;
$brand-warning:             #f0ad4e !default;
$brand-danger:              #d9534f !default;

...

Variables custom

Mon fichier _variables_btstrp.scss contenant les variables que j’aimerais personnaliser :

//
// My Custom Colors
//
// Grayscale and brand colors for my app

$gray-dark:                 #000;
$gray:                      grey;
$gray-light:                lightgrey;
$gray-lighter:              #ccc;
$gray-lightest:             #fff;

$brand-primary:             blue;
$brand-success:             green;
$brand-info:                cyan;
$brand-warning:             orange;
$brand-danger:              red;

...

Mon import sass

Pour builder ma version personnalisée à partir de external.scss, je fais un import de mes variables custom, puis de la librairie complète (c’est à dire, avec son propre fichier de variables) :

//external.scss

// Personnalisation des styles via mes variables
@import "partials/_variables_btstrp";

// Import du Framework et donc des variables natives de Bootstrap
@import "../libs/bootstrap/scss/bootstrap";

Buildez le fichier, et voilà, nous avons généré une librairie personnalisée et maintenable !