La directive @import

La directive @import, vous la connaissez probablement déjà : c’est elle qui permet d’indiquer au navigateur qu’il doit charger d’autres feuilles de styles, à la manière de la balise <link> en HTML. Si je vous en parle dans ce chapitre, c’est parce que son comportement change considérablement avec Sass, et c’est tant mieux.

Importer des feuilles de style

Durant le processus de développement, il est souvent intéressant de diviser son code en plusieurs fichiers, pour mieux s’organiser. Mais, d’un autre côté, cela augmente le nombre de requêtes effectuées vers le serveur de production, et ralentit donc le chargement de la page.

Avec Sass, on n’a plus à se poser la question : notre outil favori modifie le comportement de la directive @import : en fait, plutôt que de laisser le navigateur charger une à une les feuilles de styles importées, il les importe dès à la compilation. Ainsi, on a plusieurs fichiers SCSS, pour une meilleure organisation, mais on n’a qu’un fichier CSS, pour plus de performance.

Regardons de plus près notre feuille de style fil rouge : j’ai fait exprès de séparer les styles en différentes sections, pour garder un peu de clarté : on a ainsi la section configuration contenant toutes nos variables, la section Reset, la section typographie, la section boutons, etc.

Ce serait plus clair si chaque section avait son propre fichier, non ? Je vous propose donc de créer un fichier pour chacune d’entre elles, de manière à obtenir cette arborescence :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
sass
  ├─ sections.scss
  ├─ button.scss
  ├─ cards.scss
  ├─ contact.scss
  ├─ header_footer.scss
  ├─ reset.scss
  ├─ typo.scss
  ├─ config.scss
  └─ main.scss

Placez dans chaque fichier le contenu de la section correspondante. Maintenant, on devrait se retrouver avec un main.scss totalement vide. Que va-t-on utiliser désormais ? Mais oui, la commande @import !

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Fichier main.scss
@import 'reset'; // en premier, évidemment
@import 'config'; // important de le mettre ici, sinon les autres
                     // fichiers n'auront pas accès à nos variables
@import 'buttons';
@import 'typo';
@import 'cards';
@import 'header_footer';
@import 'sections';
@import 'contact';

Comme vous pouvez le voir, la directive @import demande le nom du fichier à importer entre guillemets. Détail intéressant : Sass est suffisamment intelligent pour deviner l’extension du fichier et on n’a donc pas à la préciser. Si vous regardez désormais dans le fichier stylesheets/main.css, vous verrez que son contenu n’a pas changé : chaque directive @import a été remplacée par le contenu du fichier correspondant.

Bonne pratique : Les feuilles partielles

Formidable ? Un petit détail vient quand même assombrir le tableau : Sass a généré un fichier CSS pour chaque fichier SCSS. Or, on souhaite seulement qu’il génère le fichier main.css. En fait, il faudrait pouvoir dire à Sass de ne pas ne pas compiler les autres feuilles de styles. Et, comme vous pouvez vous en douter, les concepteurs de Sass y ont pensé pour nous.

On appelle feuille partielle (traduction de partial, en anglais), un fichier SCSS qui a uniquement vocation à être importée dans une autre feuille de styles et qui ne doit donc pas être compilée par Sass. Pour indiquer à Sass qu’un fichier est une feuille partielle, on a juste à ajouter un underscore (le symbole _) au début du nom de fichiers. Ainsi, buttons.scss devient _buttons.scss. Aucun changement à faire dans notre fichier main.scss pour autant, Sass devine qu’il doit ajouter le _.

Si vous regardez dans notre dossier stylesheets vous devriez remarquer le changement : Sass a supprimé tous nos fichiers, à l’exception de main.css, car il a compris qu’on n’avait besoin que de ce dernier.

Dernière chose à savoir : il est courant de regrouper toutes ses feuilles partielles dans un dans un sous-dossier partials, ça permet de mieux s’y retrouver. Je vous invite à le faire aussi pour notre projet. On se retrouve donc avec cette arborescence :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
sass
  ├─ partials
  |   ├─ _sections.scss
  |   ├─ _buttons.scss
  |   ├─ _cards.scss
  |   ├─ _contact.scss
  |   ├─ _header_footer.scss
  |   ├─ _reset.scss
  |   ├─ _typo.scss
  |   └─ _config.scss
  └─ main.scss

N’oubliez pas bien sûr de modifier le fichier main.scss en conséquence pour indiquer le nouveau chemin de nos partials (mais toujours pas besoin du _ ou de .scss, évidemment).

En résumé

  • Avec Sass, la directive @import permet d’importer durant la compilation le contenu d’un fichier SCSS dans un autre fichier SCSS.
  • Il est inutile de préciser l’extension du fichier importé à Sass.
  • Une feuille partielle ou partial, dont le nom commence par un underscore, est un fichier qui a uniquement vocation à être importé dans d’autres feuilles de styles. Aucun fichier CSS n’est généré pour lui à la compilation.