Chapitre 4 : Mixins

Objectif

À la fin de ce chapitre, vous savez nommer un groupe de déclarations avec @mixin et l’appeler avec @include. Vous sortez le bouton de style.scss, vous lui passez des couleurs en arguments, et un second bouton réutilise le même groupe sans recopier ses lignes.

Le dossier mon-sass reste le support. La veille se lance depuis la racine du projet :

npx sass --watch scss/style.scss css/style.css

_variables.scss et _carte.scss sont déjà en place. Le navigateur charge toujours css/style.css.

Ce qu’une variable ne range pas

Le bouton est encore écrit en entier dans style.scss. Il reprend le chapitre 2, avec le préfixe du chapitre 3.

.bouton {
  display: inline-block;
  padding: variables.$espace-s variables.$espace-m;
  background: variables.$encre;
  color: variables.$papier;
  text-decoration: none;

  &:hover {
    background: variables.$accent;
  }

  &.est-inactif {
    opacity: 0.5;
  }
}

Une variable garde une valeur : une couleur, une mesure, une police. Elle ne garde pas display, le survol, ni la classe est-inactif. Un second bouton, fond clair et texte encre, obligerait à recopier le bloc pour n’en changer que deux lignes. La copie se décale dès que le padding change d’un seul côté. Le mixin nomme le groupe. Chaque appel choisit ensuite ce qui diffère.

Écrire le mixin

Créez scss/_boutons.scss. Le souligné en fait un partiel. Le fichier charge les variables, puis nomme le groupe.

@use "variables";

@mixin action($fond, $encre-bouton) {
  display: inline-block;
  padding: variables.$espace-s variables.$espace-m;
  background: $fond;
  color: $encre-bouton;
  text-decoration: none;

  &:hover {
    background: variables.$accent;
    color: variables.$papier;
  }

  &.est-inactif {
    opacity: 0.5;
  }
}

@mixin est suivi du nom, ici action, puis des arguments. $fond et $encre-bouton n’existent que dans ce mixin. Ils ne rejoignent pas _variables.scss. Le préfixe variables. reste obligatoire pour $espace-s, $accent et $papier, qui viennent de l’autre module.

@use reste en tête, avant @mixin. Placé au-dessus, le mixin arrête le compilateur, comme une règle CSS trop haute. Le message cite le fichier et la ligne.

Définir un mixin n’écrit aucune règle. Tant que personne ne l’appelle, css/style.css ne change pas. Enregistrez _boutons.scss sans toucher à l’entrée : le bouton à l’écran reste celui d’hier.

Appeler avec @include

Dans style.scss, chargez le partiel et remplacez l’ancien bloc par un appel.

@use "variables";
@use "carte";
@use "boutons";

body {
  font-family: variables.$texte;
  color: variables.$encre;
  margin: 2rem;
}

.bouton {
  @include boutons.action(variables.$encre, variables.$papier);
}

boutons est l’espace de noms, tiré du fichier. On écrit @include boutons.action. Le préfixe se place sur le nom du mixin, pas devant @include. Les arguments suivent l’ordre de la définition : le fond, puis la couleur du texte. variables.$encre vaut #1f2933, variables.$papier vaut #f7f3ea.

La veille réécrit css/style.css. .bouton contient display, le padding et la couleur hexadécimale. Le survol est devenu .bouton:hover. La classe inactive est devenue .bouton.est-inactif, sans espace : le point de &.est-inactif colle au parent. Il ne reste ni @mixin, ni @include, ni dollar. Sass a copié les déclarations à l’endroit de l’appel.

Si le compilateur dit que le mixin n’existe pas, le @use manque, le préfixe est faux, ou le nom du fichier ne correspond pas. @use "bouton" ne charge pas _boutons.scss. Dans un nom Sass, le tiret et le souligné sont le même signe : bouton-fort et bouton_fort désigneraient le même mixin. Ici, le nom tient en un mot, action.

Un second bouton

Ajoutez deux liens dans index.html, sous la carte.

<a class="bouton" href="index.html">Entrer</a>
<a class="bouton-calme" href="index.html">Lire d’abord</a>

La seconde classe appelle le même mixin. Seuls les arguments changent.

.bouton {
  @include boutons.action(variables.$encre, variables.$papier);
}

.bouton-calme {
  @include boutons.action(variables.$papier, variables.$encre);
}

Les deux boutons partagent le padding, display et l’état inactif. Le premier a un fond encre et un texte papier. Le second inverse ces couleurs. Au survol, les deux passent au bordeaux #9b2226 avec un texte papier, parce que cette règle vit dans le mixin. On la modifie à un seul endroit.

Dans css/style.css, display: inline-block apparaît deux fois, une fois par classe. Chaque @include copie. La source reste courte, le fichier livré répète. La leçon suivante dira quand cette copie devient gênante.

Donner des valeurs par défaut

Le bouton foncé est le cas fréquent. Écrivez ses couleurs dans la définition, et ne les répétez que pour l’exception. Remplacez la première ligne du mixin. Le corps ne change pas.

@mixin action(
  $fond: variables.$encre,
  $encre-bouton: variables.$papier
) {

L’appel habituel peut omettre les parenthèses. Pour l’exception, nommez les arguments : le compilateur ne devine pas qu’ils ont été inversés, puisque les deux valeurs sont des couleurs.

.bouton {
  @include boutons.action;
}

.bouton-calme {
  @include boutons.action(
    $fond: variables.$papier,
    $encre-bouton: variables.$encre
  );
}

Le défaut est lu dans _boutons.scss, là où le mixin est écrit. Ce fichier charge donc variables lui-même. L’appel ne lui transmet pas le module.

Compléter un seul bouton

Dans le mixin, & désigne le sélecteur qui contient le @include. Dans .bouton, &:hover devient .bouton:hover. Appelé à la racine du fichier, hors de toute règle, & n’a plus de parent : Dart Sass signale un sélecteur invalide. L’appel reste dans une règle.

Une déclaration après l’appel ne concerne que cette classe.

.bouton-calme {
  @include boutons.action(
    $fond: variables.$papier,
    $encre-bouton: variables.$encre
  );
  border: 2px solid variables.$encre;
}

La bordure reste sur le bouton clair. On met dans le mixin ce qui est commun, et dehors ce qui ne sert qu’une fois. Le mixin ne contient pas non plus le sélecteur .bouton : s’il le contenait, le second appel recopierait encore .bouton, et .bouton-calme n’existerait pas dans le CSS. Le nom de la classe appartient à l’appel. Le mixin fournit les déclarations.

Exercice

Reprenez mon-sass. index.html reste lié à css/style.css.

Créez scss/_boutons.scss avec @use "variables";, le mixin action, ses deux arguments et leurs défauts.
Dans style.scss, ajoutez @use "boutons"; sous les autres chargements. Effacez l’ancien bloc .bouton.
Écrivez .bouton avec @include boutons.action;, et .bouton-calme avec les arguments nommés plus la bordure.
Ajoutez les deux liens dans index.html. Rechargez : un bouton foncé, un bouton clair, le même survol bordeaux.
Dans css/style.css, display: inline-block apparaît deux fois, et @include a disparu.
Retirez un instant @use "boutons";. Lisez le message, puis remettez la ligne.
Passez $espace-s de 0.5rem à 0.75rem dans _variables.scss. Les deux boutons changent ensemble. Remettez 0.5rem.

C’est réussi quand les deux classes passent par action, et quand une mesure changée dans _variables.scss met à jour les deux boutons sans édition de leurs règles. Si le bouton calme reste foncé, nommez $fond et $encre-bouton à l’appel.

À retenir

@mixin nomme des déclarations. Sans @include, elles ne vont pas dans le CSS.
Avec @use, l’appel s’écrit @include boutons.action.
Les arguments portent ce qui varie. Les défauts couvrent le cas fréquent. Nommez-les dès que l’ordre ne suffit plus.
& désigne la règle qui contient l’appel. Ce mixin ne s’inclut pas à la racine.
Chaque appel copie les déclarations. Le CSS livré peut répéter ce que la source ne répète plus.

La suite

La copie est honnête : deux boutons, deux blocs dans css/style.css. Elle pèse si dix composants répètent la même longue règle, ou si vous espériez un seul sélecteur pour les regrouper. La leçon suivante, « @extend, et quand ne pas l’utiliser », montre ce regroupement, puis les cas où il embrouille la feuille plus qu’il ne l’allège. Vous garderez mon-sass, le mixin action et les deux boutons.