Heritiana Antonio Frond end Designer | Developer

Hello, I am

Heritiana Antonio

Frond end Designer | Developer

Chapitre 7 : Organiser un vrai projet

1 min de lecture

Chapitre 7 : Organiser un vrai projet

Objectif

À la fin de ce chapitre, vous rangez le projet par rôle. Les valeurs et les fonctions restent à part. La page, les composants et les utilitaires ont chacun un dossier. style.scss ne garde que trois lignes. L’écran ne change pas.

Le dossier mon-sass continue. La veille se lance depuis la racine :

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

index.html charge toujours css/style.css. Vous ne changez ni cette commande, ni la balise link.

Le dossier plat ne tient plus

scss/ contient style.scss, _variables.scss, _carte.scss, _boutons.scss et _outils.scss. L’entrée garde en plus body, les deux boutons, %encart, les messages et les deux boucles. Un formulaire de plus, et ce fichier redevient le tiroir de tout le site.

Les rôles diffèrent. Variables et fonctions n’écrivent aucune règle. body règle la page. La carte, les boutons et les messages sont des composants. .marge-s et .espace-1 sont des utilitaires. On range par rôle, pas par l’ordre d’arrivée.

Quatre dossiers

Créez les dossiers et déplacez les partiels. La veille va échouer : les chemins sont encore ceux d’hier.

scss/
  style.scss
  abstracts/
    _variables.scss
    _outils.scss
  base/
  components/
    _carte.scss
    _boutons.scss
  utilities/

abstracts/ garde ce qui ne sort pas seul. base/ recevra body, components/ les messages, utilities/ les boucles. style.scss reste le seul fichier sans souligné : la seule entrée.

La première erreur est dans l’entrée

Sass compile style.scss. La ligne @use "variables"; cherche encore scss/_variables.scss, qui n’existe plus. Le terminal affiche Can't find stylesheet to import. et s’arrête. Il ne signale pas encore la carte.

Pointez l’entrée vers les nouveaux dossiers, sans réécrire les règles. L’espace de noms est le dernier morceau du chemin : le préfixe ne change pas.

@use "abstracts/variables";
@use "components/carte";
@use "components/boutons";
@use "abstracts/outils";

variables.$encre, boutons.action et outils.message s’écrivent comme la veille. Enregistrez. L’erreur change de fichier.

Le chemin part du fichier qui l’écrit

components/_carte.scss contient encore @use "variables";. Ce chemin part du fichier courant, pas de la racine du projet. Le terminal affiche de nouveau Can't find stylesheet to import., ligne 1 de scss/components/_carte.scss. _boutons.scss a la même ligne.

Dans ces deux partiels :

@use "../abstracts/variables";

../ remonte dans scss/, puis entre dans abstracts/. On n’écrit ni le souligné, ni .scss. Le préfixe reste variables, pris sur le nom du fichier. La carte et le mixin action ne bougent pas.

_outils.scss est à côté de _variables.scss. Son @use "variables"; et son @use "sass:map"; restent justes. Ne les modifiez pas.

Relancez la veille si elle s’est arrêtée. Le terminal se tait. La page est la même. Dans css/style.css, #1f2933 et #f7f3ea sont là. Le déplacement n’a rien ajouté au CSS.

Sortir les règles de l’entrée

Coupez body dans scss/base/_page.scss.

@use "../abstracts/variables";

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

Sous le mixin, dans components/_boutons.scss, collez les deux classes. Dans le fichier qui définit action, l’appel n’a pas de préfixe. boutons.action était le nom vu depuis l’entrée.

.bouton {
  @include action;
}

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

Le HTML ne change pas. Créez scss/components/_messages.scss. %encart reste avec les classes qui l’étendent : @extend rejoint le sélecteur de ce fichier.

@use "../abstracts/variables";
@use "../abstracts/outils";

%encart {
  padding: variables.$espace-m;
  border: 1px solid variables.$encre;
  border-radius: 4px;
}

.succes {
  @extend %encart;
  border-color: outils.message("succes");
}

.erreur {
  @extend %encart;
  border-color: outils.message("erreur");
}

Le vert vient de outils.message("succes"), le bordeaux de "erreur". Créez scss/utilities/_espaces.scss. Les chemins remontent d’un dossier, comme dans la carte. Les boucles sont celles d’hier.

@use "../abstracts/variables";
@use "../abstracts/outils";

$paliers: (
  "s": variables.$espace-s,
  "m": variables.$espace-m,
  "l": variables.$espace-l,
);

@each $nom, $valeur in $paliers {
  .marge-#{$nom} {
    margin-bottom: $valeur;
  }
}

@for $i from 1 through 3 {
  .espace-#{$i} {
    margin-top: outils.espace($i);
  }
}

Une porte par dossier

Un partiel _index.scss sert de porte. @forward transmet les fichiers du dossier, et @use "base" charge base/_index.scss. Créez les trois index.

@forward "page";
@forward "carte";
@forward "boutons";
@forward "messages";
@forward "espaces";

@forward se place en tête. Une règle au-dessus l’arrête : @forward rules must be written before any other rules. L’index ne recopie pas body. Il choisit qui sort, et dans quel ordre : la carte, puis les boutons, puis les messages.

Ce n’est pas une variable globale. _carte.scss garde @use "../abstracts/variables";. Sans cette ligne, variables.$papier est de nouveau indéfinie, même si l’index est chargé.

Effacez le reste de style.scss. Tant que ces trois lignes manquent, body, les messages et les marges ne sont plus dans la feuille : ils ont quitté l’entrée. Les boutons, eux, sont déjà chargés par @use "components/boutons";.

@use "base";
@use "components";
@use "utilities";

@use "base/index" charge le même fichier, mais l’espace de noms devient index. On écrit @use "base". L’entrée ne lit aucune variable : elle ordonne les dossiers. abstracts/ n’a pas d’index, pour que variables.$encre garde le préfixe déjà écrit partout.

L’ordre dans la feuille livrée

Enregistrez. L’écran ne change pas. Dans css/style.css, l’ordre suit les @use puis les @forward : body, .carte, les boutons, .erreur, .succes, puis .marge-s jusqu’à .espace-3. Avant, body arrivait après la carte. Le placer en tête ne change rien à l’écran : ces sélecteurs ne visent pas les mêmes éléments. La feuille livrée ne contient ni @use, ni @forward, ni dollar.

Un index sans souligné

Arrêtez la veille avec Ctrl+C. Renommez base/_index.scss en base/index.scss, puis lancez depuis mon-sass :

npx sass scss:css

Sass écrit css/style.css et css/base/index.css. Sans le souligné, ce fichier est une entrée. Rien ne le charge dans index.html. Remettez le souligné, effacez css/base/, et relancez la veille. Sur un dossier, le compilateur ignore les partiels et compile chaque autre fichier.

Exercice

Reprenez mon-sass. index.html reste lié à css/style.css. La commande de veille ne change pas.

  1. Créez les quatre dossiers. Déplacez _variables.scss et _outils.scss dans abstracts/, _carte.scss et _boutons.scss dans components/.
  2. Lisez Can't find stylesheet to import. sur le @use "variables"; de l’entrée. Pointez-la vers abstracts/variables, components/carte, components/boutons et abstracts/outils.
  3. Lisez la même erreur dans _carte.scss. Passez la carte et les boutons à @use "../abstracts/variables";. Ne touchez pas à _outils.scss. Rechargez : l’écran est le même.
  4. Déplacez body dans base/_page.scss. Placez .bouton et .bouton-calme sous le mixin, avec @include action. Créez _messages.scss avec %encart, .succes et .erreur. Créez utilities/_espaces.scss avec les deux boucles.
  5. Ajoutez les trois _index.scss. Réduisez style.scss aux trois @use. Dans css/style.css, body précède .carte, .marge-s est là, aucun dollar ne reste.
  6. Collez une règle au-dessus d’un @forward. Lisez @forward rules must be written before any other rules., puis retirez-la. Enlevez le souligné de base/_index.scss, lancez npx sass scss:css, constatez css/base/index.css. Remettez le souligné, effacez ce dossier, relancez la veille.

C’est réussi quand l’entrée n’a que ces trois lignes, quand la page n’a pas changé, et quand une seule feuille est liée. Si la carte disparaît, son index n’est pas chargé, ou son @use vise encore variables sans remonter d’un dossier.

À retenir

  • On range par rôle : abstracts sans CSS, base, composants, utilitaires. L’entrée reste style.scss.
  • Après un déplacement, Can't find stylesheet to import. apparaît d’abord dans l’entrée, puis dans le partiel.
  • Un @use est relatif au fichier qui l’écrit. ../abstracts/variables s’utilise encore comme variables.$encre.
  • @use "base" charge _index.scss. @forward transmet les partiels, en tête de fichier, dans l’ordre du CSS.
  • L’index ne remplace pas le @use d’un partiel. Le mixin s’appelle action dans son fichier. Un index sans souligné devient une feuille que la page ne charge pas.

La suite

Le projet a une entrée, des dossiers et une seule feuille. Cette feuille est encore le CSS long écrit pour qu’on puisse le lire. La leçon suivante, « Livrer le CSS : source maps et fichier allégé », sépare le fichier ouvert pour chercher une règle de celui que la page peut recevoir. Vous garderez mon-sass, les quatre dossiers, les index et la commande de veille.