7.5 — L’Utility API

⏱️ TL;DR — L’Utility API est un mécanisme Sass qui génère les classes utilitaires à partir d’une map $utilities. Vous pouvez modifier, désactiver ou créer des utilitaires (avec responsive, états :hover, variantes) en éditant cette map — sans écrire de CSS répétitif. C’est réservé au build npm/Sass.

🎯 Objectifs

• Comprendre comment Bootstrap génère ses utilitaires.
• Ajouter une nouvelle classe utilitaire.
• Modifier ou supprimer un utilitaire existant.

Le principe

Chaque famille d’utilitaires est décrite par une entrée dans la map Sass $utilities. Bootstrap boucle dessus pour générer les classes. Exemple simplifié d’une entrée :

$utilities: (
  "opacity": (
    property: opacity,
    values: (0: 0, 25: .25, 50: .5, 75: .75, 100: 1)
  )
);

Cela génère .opacity-0, .opacity-25, etc.

Créer un utilitaire

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
 
// Ajouter une famille "cursor"
$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab not-allowed,
    )
  )
);
 
@import "bootstrap/scss/utilities/api";

Génère .cursor-pointer, .cursor-grab, et les variantes responsives .cursor-md-pointer.

Options d’une entrée

Modifier ou désactiver

// changer les valeurs d'un utilitaire existant
$utilities: map-merge($utilities, (
  "width": map-merge(
    map-get($utilities, "width"),
    (values: (10: 10%, 25: 25%, 50: 50%, 100: 100%))
  )
));
 
// désactiver complètement un utilitaire
$utilities: map-merge($utilities, ("float": null));

⚠️ Piège — L’ordre des @import compte : utilities avant vos modifications, puis utilities/api après. Sinon vos ajouts ne sont pas pris en compte, ou l’API génère avant vos merges.

💡 Pour un dev React — L’Utility API est l’équivalent conceptuel de la config theme.extend de Tailwind : un point central pour étendre le système de classes. C’est ce qui permet d’aligner Bootstrap sur vos design tokens sans dupliquer du CSS à la main.

✏️ Exercices

1. Générez une classe .cursor-pointer.

2. Comment désactiver totalement l’utilitaire float ?

🧠 Quiz de révision

🎉 Fin de la Partie 7 ! Partie suivante : Partie 8 — Personnalisation avec Sass