Teste tes acquis

Trois questions, une par compétence. Ce n'est pas noté : c'est pour toi. Essaie d'abord, ouvre la correction ensuite.

1. Structurer une feuille de style

Réécris ce CSS en Sass : au moins une variable, et .alert-success-title imbriqué dans .alert-success. Le CSS doit rester équivalent à droite.

Transforme le code de gauche, en gardant le même CSS à droite

SCSS (ce que tu écris)

CSS (ce que lit le navigateur)

Ce qui valide la réponse

Une variable de couleur réutilisée, et une imbrication correcte, avec & si besoin. Il n'y a pas une seule syntaxe attendue : toute solution qui respecte ces deux critères est bonne.

2. Factoriser et justifier

Tu as trois boutons qui ne changent que par leur couleur de fond. Choisis-tu un mixin ou un @extend ? Justifie en une phrase.

Ce qui valide la réponse

« Mixin », avec une justification qui parle du paramètre : la couleur est ce qui varie. « Parce que c'est mieux » ne suffit pas. Un @extend peut se défendre à condition d'expliquer correctement qu'aucun paramètre ne varie : ici c'est discutable dans les deux sens, la justification compte plus que le mot choisi.

3. Compiler et diagnostiquer

Voici un message d'erreur réel du compilateur. Qu'est-ce qui cause cette erreur, et comment la corriges-tu ?

Error: Undefined variable.
  ╷
3 │   color: $primry-color;
  │          ^^^^^^^^^^^^^
  ╵
  style.scss 3:10

Ce qui valide la réponse

Repérer la faute de frappe dans le nom de la variable à partir du message : $primry-color au lieu de $primary-color. Une réponse du type « il y a une erreur de syntaxe » est trop vague.