8.4 — Functions & mixins

⏱️ TL;DR — Bootstrap fournit des functions Sass (color-contrast(), tint-color(), shade-color(), map-get()) et des mixins (media-breakpoint-up(), make-col(), button-variant(), box-shadow()) réutilisables dans votre propre CSS pour rester cohérent avec le framework.

🎯 Objectifs

• Utiliser les functions de couleur.
• Écrire des media queries avec les mixins de breakpoint.
• Générer des variantes de composants.

Functions de couleur

.badge-custom {
  background: $primary;
  color: color-contrast($primary);      // noir ou blanc selon le contraste
}
.hover-zone:hover { background: tint-color($primary, 20%); }   // éclaircir
.pressed        { background: shade-color($primary, 20%); }    // assombrir

• color-contrast($c) → choisit automatiquement un texte lisible.
• tint-color($c, %) / shade-color($c, %) → éclaircir / assombrir.

Mixins de breakpoint

Plutôt que d’écrire des media queries à la main, réutilisez les seuils de Bootstrap :

.sidebar {
  display: none;
  @include media-breakpoint-up(lg) {   // ≥ 992px
    display: block;
  }
}
.banner {
  @include media-breakpoint-down(md) { // < 768px
    font-size: .875rem;
  }
}
.only-md {
  @include media-breakpoint-only(md) { … }
}

Vos media queries restent synchronisées avec $grid-breakpoints : si vous changez un breakpoint, tout suit.

Mixin de grille

.custom-col {
  @include make-col(4, 12);   // 4 colonnes sur 12
}

Générer une variante de bouton

.btn-gradient {
  @include button-variant(#7952b3, #7952b3);
}

Media query d’une plage

@include media-breakpoint-between(md, xl) { … }  // de 768px à 1199px

⚠️ Piège — Ces mixins/functions ne sont disponibles qu’après l’import de functions, variables, maps et mixins. Si Sass se plaint d’une fonction « undefined », c’est un problème d’ordre d’import.

💡 Pour un dev React — media-breakpoint-up() évite de coder en dur @media (min-width: 992px) un peu partout : une seule source de vérité pour les breakpoints, réutilisable dans les CSS Modules de vos composants. Beaucoup plus maintenable.

✏️ Exercices

1. Écrire une règle qui masque un élément en dessous de lg, avec un mixin.

.el { display: none; @include media-breakpoint-up(lg) { display: block; } }

2. Choisir automatiquement une couleur de texte lisible sur un fond $primary.

🧠 Quiz de révision

Chapitre suivant : 8.5 — Les variables CSS (—bs-*)