Quiz 13 — Sass (1) : variables & options
⏱️ TL;DR — 50 questions sur l’import Sass, les variables et les options
$enable-*(Partie 8). Réponds de tête, puis déplie.
1. Quel fichier importer en tout premier ?
Réponse
functions.
2. Vos variables : avant ou après variables ?
Réponse
Avant.
3. Que fait !default ?
Réponse
Applique la valeur seulement si non déjà définie.
4. Pourquoi importer le Sass plutôt que bootstrap.css ?
Réponse
Pour surcharger les variables et recompiler.
5. De quoi maps dépend-il ?
Réponse
Des variables.
6. Variable de la couleur principale ?
Réponse
$primary.
7. Désactiver tous les coins arrondis ?
Réponse
$enable-rounded: false.
8. Variable de la taille de police de base ?
Réponse
$font-size-base.
9. Variable de la police de base ?
Réponse
$font-family-base.
10. Activer les ombres des composants ?
Réponse
$enable-shadows: true.
11. Variable du rayon de bordure ?
Réponse
$border-radius.
12. Changer $primary recolore quoi ?
Réponse
Boutons, liens, alertes, badges… (tout ce qui en dérive).
13. Ordre correct des imports (socle) ?
Réponse
functions → variables → maps → mixins → root.
14. Créer un fichier Sass custom en Next.js : quel paquet ?
Réponse
sass.
15. Option pour activer les dégradés ?
Réponse
$enable-gradients.
16. Option pour activer les transitions ?
Réponse
$enable-transitions.
17. Option pour les marges négatives ?
Réponse
$enable-negative-margins.
18. Option RFS ?
Réponse
$enable-rfs (responsive font sizing).
19. Que fait $enable-rounded: false ?
Réponse
Tous les coins deviennent carrés.
20. Un thème « flat & carré », quelles options ?
Réponse
$enable-rounded/shadows/gradients: false.
21. Mettre $primary après @import variables : effet ?
Réponse
Ignoré (trop tard).
22. Variable du poids des titres ?
Réponse
$headings-font-weight.
23. Variable de l’interligne de base ?
Réponse
$line-height-base.
24. $font-size-base: 1rem vaut combien de px (par défaut) ?
Réponse
16 px.
25. Changer les couleurs subtle/emphasis : quand ?
Réponse
Avant l’import des maps.
26. Où placer un fichier bootstrap-custom.scss en Next.js ?
Réponse
Importé dans app/layout.js.
27. Bootstrap déclare ses variables avec quel drapeau ?
Réponse
!default.
28. functions doit venir avant quoi ?
Réponse
Tout (il définit des helpers utilisés dans les variables).
29. Rendre l’interface anguleuse en une ligne ?
Réponse
$enable-rounded: false;.
30. Changer la police pour Inter ?
Réponse
$font-family-base: "Inter", …;.
31. Variable du rayon large ?
Réponse
$border-radius-lg.
32. $enable-validation-icons fait quoi ?
Réponse
Affiche des icônes dans les champs validés.
33. Recompiler est nécessaire pour changer $primary ?
Réponse
Oui (Sass = compilation).
34. Une valeur Sass peut-elle être modifiée au runtime ?
Réponse
Non (contrairement aux variables CSS).
35. Les $enable-* sont de quel type ?
Réponse
Booléens.
36. Vite/Next compilent-ils le Sass nativement ?
Réponse
Oui, avec sass installé.
37. Où mettre $success: #1aae6f ?
Réponse
Après functions, avant variables.
38. Le mécanisme de personnalisation repose sur… ?
Réponse
!default + l’ordre d’import.
39. Variable de l’échelle d’espacement ?
Réponse
$spacer.
40. Changer $spacer affecte quoi ?
Réponse
Toutes les classes m-*/p-*.
41. Combien de variables Bootstrap expose-t-il, environ ?
Réponse
Des centaines.
42. Fichier importé après variables pour le dark ?
Réponse
variables-dark.
43. Peut-on n’importer que quelques modules ?
Réponse
Oui (build minimal).
44. Une base « flat design » : quel $enable-* clé ?
Réponse
$enable-rounded: false (+ shadows/gradients).
45. $headings-font-weight: 700 fait quoi ?
Réponse
Met les titres en gras 700.
46. Le CDN permet-il ces surcharges Sass ?
Réponse
Non.
47. Où déclarer une Google Font pour Bootstrap ?
Réponse
La charger + $font-family-base.
48. Que se passe-t-il si functions est oublié ?
Réponse
Erreurs de fonctions « undefined ».
49. Recompiler après chaque changement de variable : nécessaire ?
Réponse
Oui (le bundler s’en charge en dev).
50. Résumé : deux leviers de perso Sass ?
Réponse
Variables (couleurs/typo/rayons) et options $enable-*.
Quiz suivant : Quiz 14 — Sass (2) : maps, mixins, CSS vars.