Heritiana Antonio Frond end Designer | Developer

Hello, I am

Heritiana Antonio

Frond end Designer | Developer

Chapitre 2 : Variables et imbrication

1 min de lecture

Chapitre 2 : Variables et imbrication

Objectif

À la fin de ce chapitre, vous savez nommer une couleur ou une mesure avec une variable Sass, la réutiliser dans plusieurs règles, et imbriquer des sélecteurs dans le même ordre que le HTML. Vous savez aussi ouvrir le CSS compilé pour vérifier ce que le navigateur reçoit vraiment.

Le dossier mon-sass du premier chapitre sert de support. Relancez la veille si elle est arrêtée :

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

Vous modifiez scss/style.scss. Le navigateur continue de charger css/style.css.

Nommer une valeur

Une variable Sass commence par $. Le dollar fait partie du nom. Viennent ensuite le nom, deux-points, la valeur et un point-virgule.

$encre: #1f2933;

Cette ligne existe déjà dans votre fichier. Ajoutez au-dessus des règles les valeurs qui reviendront souvent : couleurs, texte, espaces.

$encre: #1f2933;
$papier: #f7f3ea;
$accent: #9b2226;

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

Le nom dit le rôle, pas l’apparence du jour. $accent reste juste si le rouge devient bleu. $rouge deviendrait faux. $espace-s, $espace-m et $espace-l désignent un petit palier, un palier moyen et un palier large.

À la compilation, la variable disparaît. Le CSS contient #1f2933, jamais $encre. Ce mécanisme diffère d’une variable CSS, qui s’écrit --encre et reste lisible par le navigateur. Ici, le dollar sert à n’écrire la valeur qu’une fois dans la source.

Placez un commentaire muet au-dessus d’un groupe. Les deux barres n’apparaissent pas dans le CSS :

// Couleurs de la page
$encre: #1f2933;

Où le nom est visible

Une variable écrite à la racine du fichier, hors de toute accolade, est disponible plus bas dans ce fichier. L’ordre compte. Appeler $accent avant sa déclaration arrête le compilateur : variable indéfinie. Le message indique le fichier et la ligne, comme pour le point-virgule oublié. Corrigez la source, enregistrez, et laissez la veille réécrire le CSS.

Une variable écrite dans une règle reste dans cette règle. Elle peut porter le même nom qu’une variable de la racine. Il y a alors deux variables : la locale masque la globale jusqu’à la fin du bloc.

$encre: #1f2933;

.carte {
  $encre: #9b2226;
  color: $encre;
}

p {
  color: $encre;
}

La carte devient rouge. Le paragraphe garde #1f2933. Pour changer toute la feuille, modifiez la ligne du haut. Le drapeau !global peut réassigner une variable de la racine depuis un bloc. Nous ne l’utilisons pas : une valeur partagée se déclare une fois, à la racine, là où on la cherche.

Tiret et souligné

Dans un nom Sass, le tiret et le souligné désignent le même identifiant. $espace-m et $espace_m sont une seule variable. La seconde déclaration remplace la première. Les classes CSS échappent à cette règle : .carte-note et .carte_note restent deux sélecteurs. Pour les variables, choisissez le tiret et gardez-le partout.

Calculer avec un nom

Sass calcule avant d’écrire le CSS. Une marge double de l’espace moyen s’écrit avec le nom, pas avec un second chiffre recopié à la main.

.carte {
  padding: $espace-m;
  margin-bottom: $espace-m * 2;
}

Le fichier compilé reçoit padding: 1rem; et margin-bottom: 2rem;. Si $espace-m passe à 1.25rem, les deux lignes suivent à l’enregistrement suivant.

Multiplié par un nombre, une longueur reste une longueur. Additionner 1rem et 4px mélange deux unités que Sass ne convertit pas, et la compilation s’arrête. Quand c’est le navigateur qui doit additionner, écrivez calc(1rem + 4px). Sass laisse alors l’expression telle quelle.

Imbriquer comme le HTML

L’imbrication range les sélecteurs les uns dans les autres. Le HTML suivant :

<article class="carte">
  <h2>Atelier</h2>
  <p>Un paragraphe dans la carte.</p>
</article>

se décrit dans le même ordre :

.carte {
  background: $papier;
  color: $encre;
  padding: $espace-m;
  font-family: $texte;

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

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

Les propriétés de la carte restent en haut du bloc. Les règles internes viennent ensuite. Après compilation, l’imbrication a disparu :

.carte {
  background: #f7f3ea;
  color: #1f2933;
  padding: 1rem;
  font-family: Georgia, serif;
}
.carte h2 {
  margin-top: 0;
  font-size: 1.4rem;
}
.carte p {
  line-height: 1.6;
  margin-bottom: 0;
}

L’espace dans .carte h2 signifie « un titre à l’intérieur de la carte ». Sass l’ajoute parce que h2 est écrit dans le bloc, sans autre signe. Ouvrez css/style.css et comparez. Le sélecteur compilé dit ce que le navigateur applique.

Coller au parent avec &

& reprend le sélecteur parent et s’y colle. Il sert quand la règle concerne le même élément, pas un enfant : un survol, ou une classe posée en plus sur le bouton.

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

  &:hover {
    background: $accent;
  }

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

Le CSS contient .bouton:hover et .bouton.est-inactif. Il n’y a pas d’espace avant :hover, ni avant .est-inactif. Avec un espace, .bouton :hover chercherait un survol à l’intérieur du bouton, et .bouton .est-inactif chercherait un enfant qui porte la classe.

& peut aussi allonger le nom. Écrit dans .carte, &__titre devient .carte__titre. Le résultat est une classe unique, pas un enfant. Cette classe doit exister dans le HTML. Un suffixe inventé seulement dans le SCSS ne correspond à aucune balise, et la règle ne s’applique à rien.

Deux niveaux, pas davantage

Chaque niveau rallonge le sélecteur compilé et le lie à la forme exacte du HTML. Trois blocs emboîtés produisent souvent une chaîne comme .page .carte p a. Elle pèse plus qu’une classe, rate l’élément si un cran de HTML change, et se laisse mal surcharger. Restez à la règle et à ses enfants. Pour descendre plus bas, donnez une classe à l’élément et déclarez-la à la racine.

Une media query écrite dans le bloc ne crée pas un descendant. Elle répète le sélecteur en cours sous la condition.

.carte {
  padding: $espace-m;

  @media (min-width: 40rem) {
    padding: $espace-l;
  }
}

Dans le CSS, la carte a d’abord 1rem de remplissage. À partir de 40 rem de largeur, une seconde règle lui donne 2rem. Les deux largeurs restent écrites à côté du reste de la carte.

Exercice

Reprenez mon-sass, avec la veille en marche et index.html lié à css/style.css.

  1. Déclarez en haut du SCSS $encre, $papier, $accent, $espace-s et $espace-m.
  2. Ajoutez un article de classe carte, avec un h2, un p et un lien de classe bouton.
  3. Donnez à la carte un fond papier et un texte encre. Imbriquez le titre et le paragraphe.
  4. Stylez le bouton. Avec &:hover, passez le fond à $accent.
  5. Dans le CSS compilé, vérifiez trois choses : plus de dollar, un espace dans .carte h2, aucun espace dans .bouton:hover.
  6. Écrivez color: $absente;, lisez le fichier et la ligne indiqués, puis effacez cette ligne. Le CSS doit recompiler sans message.

C’est réussi quand vous montrez, dans css/style.css, une couleur hexadécimale venue d’une variable et un :hover collé à .bouton. Si le survol ne change rien, comparez d’abord la présence ou l’absence d’espace devant :hover.

À retenir

  • Une variable Sass commence par $. La compilation la remplace par sa valeur.
  • Le nom dit le rôle. Tiret et souligné y comptent pour le même caractère.
  • Une déclaration à la racine vaut pour la suite du fichier. Une déclaration dans un bloc y reste.
  • L’imbrication produit un descendant, avec un espace. & colle au parent, sans espace.
  • Deux niveaux suffisent presque toujours. En cas de doute, le CSS compilé tranche.

La suite

Couleurs, espaces et composants vivent encore dans le même style.scss. La leçon suivante, « Fichiers partiels et @use », place les variables dans un fichier à part et le charge explicitement. Vous garderez mon-sass et les mêmes noms. Vous verrez aussi pourquoi un fichier dont le nom commence par un souligné ne produit pas, à lui seul, une feuille CSS.