Quiz 14 — Sass (2) : maps, mixins, CSS vars
⏱️ TL;DR — 50 questions sur les maps, functions, mixins, variables CSS et le build minimal (Partie 8). Réponds de tête, puis déplie.
1. Quelle map liste les couleurs contextuelles ?
Réponse
$theme-colors.
2. Fonction Sass pour ajouter à une map ?
Réponse
map-merge.
3. Ajouter une couleur à $theme-colors génère quoi ?
Réponse
btn-, bg-, text-, text-bg-, -subtle, etc.
4. Map des breakpoints ?
Réponse
$grid-breakpoints.
5. Retirer une couleur du thème ?
Réponse
map-remove($theme-colors, "nom").
6. Map des largeurs de container ?
Réponse
$container-max-widths.
7. Map de l’échelle d’espacement ?
Réponse
$spacers.
8. Ajouter m-6/p-7, comment ?
Réponse
map-merge($spacers, (6: …, 7: …)).
9. Ordre pour ajouter une couleur de thème ?
Réponse
Après variables, avant maps.
10. Function qui choisit un texte lisible selon le fond ?
Réponse
color-contrast().
11. Éclaircir une couleur ?
Réponse
tint-color($c, %).
12. Assombrir une couleur ?
Réponse
shade-color($c, %).
13. Mixin « à partir de lg » ?
Réponse
media-breakpoint-up(lg).
14. Mixin « en dessous de md » ?
Réponse
media-breakpoint-down(md).
15. Mixin pour une seule taille ?
Réponse
media-breakpoint-only(md).
16. Mixin pour une plage ?
Réponse
media-breakpoint-between(md, xl).
17. Avantage des mixins de breakpoint ?
Réponse
Media queries synchronisées avec $grid-breakpoints.
18. Mixin de grille (colonnes) ?
Réponse
make-col().
19. Mixin qui génère une variante de bouton ?
Réponse
button-variant().
20. Ces mixins nécessitent quels imports préalables ?
Réponse
functions, variables, maps, mixins.
21. Différence Sass var / CSS var ?
Réponse
Compilation vs runtime (modifiable dans le navigateur).
22. Où redéfinir une variable CSS globalement ?
Réponse
Sur :root.
23. Changer --bs-primary en JS ?
Réponse
documentElement.style.setProperty('--bs-primary', …).
24. Variables de composant, exemples ?
Réponse
--bs-card-*, --bs-btn-*, --bs-nav-link-*…
25. Surcharger une carte localement, comment ?
Réponse
style="--bs-card-cap-bg: …".
26. À quoi sert la version -rgb ?
Réponse
Composer rgba(var(--bs-primary-rgb), α).
27. Rebranding complet : Sass ou CSS var ?
Réponse
Sass (couleurs dérivées figées à la compilation).
28. Ajustement dynamique : Sass ou CSS var ?
Réponse
CSS var.
29. Socle obligatoire du build minimal ?
Réponse
functions, variables (+dark), maps, mixins, root.
30. Où placer les utilitaires dans l’import ?
Réponse
À la fin (utilities puis utilities/api).
31. Doit-on tout importer en Sass ?
Réponse
Non — socle + modules voulus.
32. Alléger encore les utilitaires ?
Réponse
Purge (PurgeCSS).
33. N’embarquer qu’un plugin JS ?
Réponse
import { Modal } from 'bootstrap'.
34. Modifier les breakpoints, quelle map ?
Réponse
$grid-breakpoints.
35. Ajouter btn-brand, comment ?
Réponse
Ajouter brand à $theme-colors.
36. map-remove sert à ?
Réponse
Retirer des entrées d’une map.
37. Retirer info et light du thème ?
Réponse
map-remove($theme-colors, "info", "light").
38. Un thème de marque via tokens : quelle map ?
Réponse
$theme-colors.
39. color-contrast($primary) renvoie quoi ?
Réponse
Noir ou blanc selon le contraste.
40. Surcharger --bs-primary recolore-t-il TOUT ?
Réponse
Non — certaines couleurs dérivées sont figées.
41. --bs-gutter-x en inline : possible ?
Réponse
Oui (style="--bs-gutter-x: 2rem").
42. Modules obligatoires avant tout composant ?
Réponse
Le socle (functions…root).
43. Erreur « function undefined » en Sass : cause ?
Réponse
Problème d’ordre d’import.
44. Un input color qui change --bs-primary en direct ?
Réponse
setProperty sur documentElement.
45. Les --bs-* sont idéales pour… ?
Réponse
Thème dynamique piloté par l’état.
46. Générer le CSS RTL depuis le Sass : outil ?
Réponse
RTLCSS.
47. Ajouter accent et brand d’un coup ?
Réponse
map-merge($theme-colors, ("accent": …, "brand": …)).
48. Le build minimal réduit surtout quoi ?
Réponse
Le poids CSS (composants non importés).
49. react-bootstrap : le build Sass minimal aide-t-il ?
Réponse
Oui (moins de CSS embarqué).
50. Résumé : maps = ?
Réponse
Des ensembles de valeurs (couleurs, breakpoints…) que Bootstrap boucle pour générer ses classes.
Quiz suivant : Quiz 15 — Color modes & dark mode.