Structure des Dossiers-Fichiers

Parfois, il est difficile d'écrire tout le code dans un seul fichier. Sass permet de diviser le code en différents fichiers et dossiers. Cela simplifie le support et la refactorisation du code.

dossier sass

Notre première tâche est de créer le dossier sass à la racine du projet. De cette façon, nous indiquons au compilateur que nous utilisons sass dans le projet.

organisation du dossier sass

Dans le dossier sass :

1. Nous créons le fichier main.scss. C'est le fichier principal pour le compilateur. Nous connecterons tous les fragments à ce fichier à l'aide de la directive @import ;
2. Nous créons différents dossiers pour les partiels sass. (par exemple, le dossier utilities pour les variables, le dossier components pour les styles répétitifs de certains éléments, le dossier base pour les styles globaux et la réinitialisation du comportement par défaut des éléments, et le dossier layouts pour les styles non répétitifs).

partiels

Maintenant, nous sommes prêts à ajouter des fichiers et à écrire du code sass pour donner du style aux éléments. Pour garder la structure, nous créons un fichier pour chaque fonctionnalité. Le nom du fichier doit commencer par un underscore (_). Pour le compilateur, cela signifie que ce n'est pas le fichier principal. C'est un partiel.

Toute la structure est prête. Nous pouvons importer tous les fichiers dans le fichier main.scss à l'aide de la directive @import. L'ordre est essentiel. Par exemple, si nous voulons utiliser certaines variables du fichier _variables.scss dans le fichier _button.scss, alors nous devons garder l'importation du fichier _variables.scss plus haut que l'importation du fichier _button.scss à l'intérieur du fichier main.scss.

La syntaxe pour importer le fichier est la suivante. Nous utilisons @import, et des guillemets doubles ("") pour spécifier le chemin correct vers le fichier.

Le contenu résultant dans le fichier main.scss est le suivant :

Remarque

Nous avons considéré les bases du préprocesseur sass qui nous permet de l'utiliser pour des projets. Cependant, tout préprocesseur possède une vaste gamme de fonctionnalités différentes. Couvrir toutes ces fonctionnalités est différent de l'objectif de ce cours.