Installez Dart Sass, compilez un premier fichier SCSS en CSS, puis reliez-le à une page HTML. Vous y lirez aussi une erreur du compilateur.

Nommez couleurs et mesures avec des variables Sass, puis imbriquez les sélecteurs comme le HTML. Vous vérifierez le CSS que reçoit le navigateur.

Rangez variables et composants dans des fichiers partiels, puis chargez-les avec @use. Un fichier en souligné ne devient pas une feuille CSS.

Donnez un nom à un groupe de déclarations avec @mixin, puis appelez-le avec @include. Les arguments changent le bouton sans recopier ses lignes.

@extend regroupe deux sélecteurs dans une seule règle. Le placeholder suffit quand rien ne change. Les boutons restent sur le mixin.

Une fonction Sass renvoie une mesure, une map nomme les couleurs des messages, et une boucle n’écrit que trois classes.

Quatre dossiers rangent les partiels. Un index transmet chaque groupe, et style.scss ne garde que trois lignes.

La veille écrit un CSS lisible et sa source map. Une seconde commande livre le fichier compressé, sans cette carte.