Chapitre 3 : Fichiers partiels et @use

Objectif

À la fin de ce chapitre, vous savez sortir les variables et la carte de style.scss, les ranger dans des fichiers partiels, et les charger avec @use. Vous savez aussi pourquoi un nom qui commence par un souligné ne produit pas, à lui seul, une feuille CSS.

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

Le navigateur charge toujours css/style.css. Les nouveaux fichiers sont de la source. Ils n’ajoutent pas de balise link dans index.html.

Pourquoi couper style.scss

Couleurs, espaces, carte et bouton vivent dans le même fichier. Ce fichier reste lisible aujourd’hui. Il le sera moins dès qu’un second composant arrivera. On sépare deux rôles. Les valeurs nommées ne produisent aucun CSS tant qu’une règle ne les appelle pas. Les règles de la carte produisent du CSS. Chacune aura son fichier.

style.scss devient le point d’entrée. Il charge les autres fichiers et garde ce qui concerne la page entière. La règle body du premier chapitre y reste. Le bouton aussi, jusqu’au chapitre suivant.

Créer le partiel

Créez scss/_variables.scss. Le souligné en tête du nom signale un partiel : un fichier prévu pour être chargé, pas pour devenir une feuille CSS. Placez-y les variables, et retirez-les de style.scss.

// Couleurs et mesures
$encre: #1f2933;
$papier: #f7f3ea;
$accent: #9b2226;

$texte: Georgia, serif;
$espace-s: 0.5rem;
$espace-m: 1rem;
$espace-l: 2rem;

Quand la commande reçoit un dossier plutôt qu’un fichier, Sass ignore les noms qui commencent par un souligné. _variables.scss ne devient pas css/_variables.css. Si vous le désignez vous-même comme entrée, Sass le compile, parce que vous l’avez nommé. Ici, l’entrée reste style.scss. Sans @use, cette entrée ne connaît plus $encre : le compilateur signale une variable indéfinie, avec le fichier et la ligne. La section suivante rétablit le lien.

Charger avec @use

@use charge un fichier comme un module. Il se place en tête de style.scss, avant toute règle. On écrit le nom sans souligné et sans extension.

@use "variables";

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

variables est l’espace de noms, tiré du nom du fichier. Après le point, le dollar reste : variables.$encre. Écrire $encre seul produit une variable indéfinie. Le compilateur indique le fichier et la ligne. Le nom est dans le module. Seul un fichier qui le charge, et qui passe par le préfixe, peut l’utiliser.

La règle body est celle du premier chapitre. La marge de 2rem ne change pas. La couleur passe par le préfixe, et Georgia peut céder la place à variables.$texte. Faites de même pour chaque variable encore présente dans style.scss, y compris dans le bouton.

Chaque fichier écrit son propre @use. Le charger dans la carte ne rend pas les noms visibles dans l’entrée. On sait ainsi d’où vient la valeur.

Une règle CSS au-dessus de @use, ou un @use écrit dans un bloc, arrête le compilateur. La règle doit précéder le reste. Les guillemets sont obligatoires, et une règle ne porte qu’une adresse. Le chemin est relatif au fichier courant : depuis scss/style.scss, @use "variables" trouve scss/_variables.scss. Si rien n’est trouvé, le message cite ce chemin. Vérifiez le dossier et l’orthographe : variable au singulier ne suffit pas.

Dès que l’entrée contient @use "variables", enregistrer le partiel relance la veille. Sass suit cette dépendance. Dans css/style.css, #1f2933 est revenu et le dollar a disparu.

Le préfixe

@use "variables" as config; remplace le préfixe par config. @use "variables" as *; le retire, et l’on écrit de nouveau $encre. On garde le préfixe. Sans lui, deux modules peuvent proposer le même nom. Dans la variable, le tiret et le souligné restent équivalents : variables.$espace-m et variables.$espace_m sont la même valeur. Le préfixe, lui, distingue les deux signes. Ici il s’écrit variables.

Déplacer la carte

Créez scss/_carte.scss et déplacez-y les règles de .carte. Le partiel charge les variables lui-même. Elles ne viennent pas de l’entrée toutes seules.

@use "variables";

.carte {
  background: variables.$papier;
  color: variables.$encre;
  padding: variables.$espace-m;

  h2 {
    margin-top: 0;
    font-size: 1.4rem;
  }

  p {
    line-height: 1.6;
    margin-bottom: 0;
  }
}

Ajoutez le chargement dans l’entrée. L’ordre des @use devient l’ordre du CSS produit.

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

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

@use "carte" ne préfixe pas la classe .carte. Le préfixe vaut pour les variables, et pour les mixins au chapitre suivant. Les sélecteurs sont recopiés tels quels. Le fichier compilé contient .carte h2, avec l’espace d’un descendant, et #f7f3ea. Il ne contient pas de @use.

Le CSS d’un module n’entre qu’une fois dans la sortie, même si deux fichiers chargent _carte.scss. L’entrée et la carte écrivent toutes deux @use "variables", et Sass exécute ce module une seule fois. Les deux voient les mêmes valeurs.

Pour voir le souligné à l’œuvre, arrêtez la veille avec Ctrl+C, puis lancez ceci depuis mon-sass :

npx sass scss:css

Sass réécrit css/style.css. Il n’ajoute pas de feuille pour _variables.scss ni pour _carte.scss. Relancez ensuite la veille du début de ce chapitre.

L’ancienne écriture @import

Beaucoup d’exemples en ligne écrivent @import "variables";. Cette règle rend les noms globaux, sans préfixe, et elle peut insérer plusieurs fois le CSS du même fichier. @use charge une fois, préfixe les noms, et limite leur portée au fichier qui contient la règle.

Dart Sass accepte encore @import, avec un avertissement de retrait. Dans ce cours, on écrit @use. Pour adapter un vieil exemple : remplacez la règle, ajoutez le préfixe, placez le tout en tête du fichier.

Exercice

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

1. Créez scss/_variables.scss avec $encre, $papier, $accent, $texte, $espace-s, $espace-m et $espace-l. Effacez ces déclarations de style.scss.
2. En première ligne de style.scss, écrivez @use "variables";. Dans body et dans le bouton, préfixez chaque variable.
3. Créez scss/_carte.scss avec les règles de .carte et, en tête, @use "variables";.
4. Dans l’entrée, sous le premier @use, ajoutez @use "carte";.
5. Dans css/style.css, vérifiez la couleur hexadécimale de body, la présence de .carte, et l’absence de dollar.
6. Arrêtez la veille, lancez npx sass scss:css, et constatez qu’aucun _variables.css n’a été créé. Relancez la veille.
7. Remplacez un instant variables.$encre par $encre. Lisez le fichier et la ligne indiqués, puis remettez le préfixe. La veille doit se taire.

C’est réussi quand le texte et la carte n’ont pas changé à l’écran, alors que $papier n’existe que dans _variables.scss. Si la carte disparaît, vérifiez que @use "carte"; est en haut de l’entrée, et que le partiel charge aussi variables.

À retenir

• Un partiel commence par un souligné. On le charge sans ce souligné et sans .scss.
• Lancé sur un dossier, Sass ne transforme pas ces fichiers en feuilles CSS.
• @use se place en tête. Il charge le module une fois et en inclut le CSS une fois.
• On écrit variables.$encre. Les sélecteurs n’ont pas de préfixe.
• Chaque fichier qui lit une variable doit charger le module.
• L’entrée reste style.scss. Le navigateur ne voit que css/style.css.

La suite

Le bouton est encore écrit en entier dans style.scss. Un second bouton qui recopierait les mêmes lignes alourdirait l’entrée. La leçon suivante, « Mixins », donne un nom à ce groupe de déclarations et l’appelle là où il sert. Vous garderez mon-sass, les deux partiels et @use.