Apprendre Organisation des Fichiers Sass pour des Projets Évolutifs

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 la maintenance et la refactorisation du code.

dossier sass

Notre première tâche consiste à créer le dossier sass à la racine du projet. De cette manière, nous indiquons au compilateur que nous utilisons Sass dans le projet.

organisation du dossier sass

Dans le dossier sass :

Création du fichier main.scss. Il s'agit du fichier principal pour le compilateur. Tous les fragments seront reliés à ce fichier à l'aide de la directive @import ;
Création de différents dossiers pour les partiels sass. (par exemple, le dossier utilities pour les variables, le dossier components pour les styles récurrents 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écurrents).

partiels

À présent, il est possible d’ajouter des fichiers et d’écrire du code sass pour appliquer les styles aux éléments. Afin de conserver la structure, un fichier est créé pour chaque fonctionnalité. Le nom du fichier doit commencer par un underscore (_). Pour le compilateur, cela signifie qu’il ne s’agit pas du fichier principal, mais d’un partiel.

Toute la structure est prête. Tous les fichiers peuvent être importés dans le fichier main.scss à l’aide de la directive @import. L’ordre est important. Par exemple, si des variables du fichier _variables.scss doivent être utilisées dans le fichier _button.scss, il est nécessaire d’importer le fichier _variables.scss avant le fichier _button.scss dans le fichier main.scss.

La syntaxe pour importer un fichier est la suivante. Utilisation de @import et de guillemets doubles ("") pour spécifier le chemin correct vers le fichier.

@import "path";

Le contenu final du fichier main.scss est le suivant :

@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";

Remarque

Nous avons abordé les bases du préprocesseur Sass qui nous permettent de l'utiliser pour des projets. Cependant, tout préprocesseur dispose d'un grand nombre de fonctionnalités différentes. Les couvrir toutes ne fait pas partie du cadre de ce cours.

Tout était clair ?

Merci pour vos commentaires !

Section 7. Chapitre 7

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you explain what a Sass partial is and why the filename starts with an underscore?

How does the folder structure help in organizing large Sass projects?

Can you show an example of how to use variables from one partial in another?

Awesome!

Completion rate improved to 2.04

Glissez pour afficher le menu