0Pricing
CSS Academy · Leçon

Imbrication des variables et fichiers partiels

Utilisez des variables Sass pour les valeurs réutilisables, imbriquez les sélecteurs pour améliorer la lisibilité et divisez le code en fichiers partiels.

Imbrication des variables et fichiers partiels est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Qu’est-ce que Sass ?

Sass (feuilles de style syntaxiquement géniales) est un préprocesseur CSS qui étend CSS avec des variables, de l’imbrication, des mixins, des fonctions et bien plus encore. Les fichiers Sass sont compilés en CSS standard.

Les deux syntaxes de Sass

Sass propose deux formats de fichiers :

  • .scss — syntaxe compatible avec CSS et qui en est un surensemble (la plus répandue)
  • .sass — syntaxe fondée sur l’indentation (sans accolades ni points-virgules)

Ce cours porte sur SCSS.

Variables Sass

Les variables Sass utilisent le préfixe $. Elles sont résolues au moment de la compilation : contrairement aux propriétés personnalisées CSS, elles ne restent pas actives dans le navigateur.

<button class="button">Sass Variables</button>

Variables Sass et propriétés personnalisées CSS

Principales différences :

  • Variables Sass : évaluées au moment de la compilation, absentes du navigateur et impossibles à modifier à l’exécution
  • Propriétés personnalisées CSS : actives dans le navigateur, modifiables par JS et sensibles à la cascade

La pratique moderne consiste à utiliser les deux : les variables Sass pour la logique lors de la construction, et les propriétés personnalisées CSS pour la personnalisation à l’exécution.

Imbrication

Sass permet d’imbriquer des sélecteurs les uns dans les autres, en reflétant la structure HTML. Le résultat compilé utilise des sélecteurs descendants.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

Sélecteur parent &amp;

& désigne le sélecteur parent, ce qui permet de créer des modèles proches de BEM et des sélecteurs d’état :

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

Avertissement sur la profondeur d’imbrication

Évitez d’imbriquer les éléments sur plus de trois niveaux. Une imbrication profonde produit des sélecteurs trop spécifiques et rend le CSS fragile. Si vous constatez que vos imbrications deviennent profondes, l’architecture CSS doit probablement être remaniée.

Partiels Sass

Un partiel est un fichier Sass dont le nom commence par un trait de soulignement (_card.scss). Les partiels ne sont pas compilés indépendamment : ils doivent être importés dans un autre fichier. Cela évite de générer des fichiers CSS de sortie indésirables.

@use pour les importations

La version moderne de Sass utilise @use pour importer les partiels. Elle fournit un espace de noms afin d’éviter les conflits entre variables :

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward pour les bibliothèques

@forward réexporte les membres d’un module afin que les fichiers qui importent votre bibliothèque puissent les utiliser :

<span class="badge">Forwarded token (lib.$primary-color)</span>

Ancien @import (obsolète)

L’ancienne directive @import est obsolète dans Dart Sass. Migrez vers @use et @forward pour bénéficier d’un meilleur espace de noms et de meilleures performances.

Vérification rapide

Quel sélecteur CSS Sass génère-t-il à partir de l’imbrication .nav { .link { color: white; } } ?

Récapitulatif

Les variables Sass ($name) sont résolues au moment de la compilation. L’imbrication reflète la structure HTML, mais évitez de dépasser trois niveaux. & désigne le sélecteur parent pour les pseudo-classes, les états et les modificateurs BEM. Les partiels (_file.scss) sont importés et non compilés directement. Utilisez @use (et non @import) pour charger les modules Sass de manière moderne.

Questions Fréquemment Posées

La leçon « Imbrication des variables et fichiers partiels » est-elle gratuite ?

Oui — le texte complet de « Imbrication des variables et fichiers partiels » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Imbrication des variables et fichiers partiels » ?

Utilisez des variables Sass pour les valeurs réutilisables, imbriquez les sélecteurs pour améliorer la lisibilité et divisez le code en fichiers partiels. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Imbrication des variables et fichiers partiels » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Imbrication des variables et fichiers partiels
  2. Mixins et inclusions
  3. Sélecteurs d’extension et d’espace réservé
  4. Fonctions Sass et flux de contrôle
← Retour à CSS Academy