Partials et modules dans Sass

Sass propose un moyen de découper ton CSS en plus petits morceaux que tu peux importer dans la feuille de style principale. Ces fichiers plus petits sont appelés « partials ». Ils te permettent de créer des modules réutilisables dans tout le projet.

Les partials

Un partial dans Sass est un fichier contenant un petit fragment de code CSS. Les règles de nommage des partials dans Sass sont simples : leur nom doit commencer par un underscore _. Par exemple, _buttons.scss.

L'underscore indique à Sass que le fichier est un partial, et non un fichier CSS principal qui doit être compilé en fichier .css. Les partials sont destinés à être importés dans d'autres fichiers Sass.

Importer

Pour importer un partial, on utilise la directive @use. Par exemple, si on a un partial _buttons.scss, on peut l'importer dans notre feuille de style principale :

1// Dans le fichier main.scss
2@use 'buttons';

Souviens-toi que lors de l'importation d'un fichier, tu n'as pas besoin d'ajouter l'underscore _ ni l'extension .scss. Sass est assez intelligent pour savoir ce que tu cherches.

Après avoir importé un partial, tous les styles définis à l'intérieur sont disponibles dans le fichier dans lequel tu l'as importé.

Les modules

Les modules sont simplement des fichiers Sass qui exportent des styles, des variables, des mixins, des fonctions, etc. Un module peut être n'importe quel fichier Sass, pas seulement un partial.

Pour importer un module, on utilise également la directive @use. Par exemple, si on a un module _variables.scss qui exporte plusieurs variables, on peut l'importer dans notre feuille de style principale :

1// Dans le fichier main.scss
2@use 'variables';

On peut ensuite utiliser ces variables dans notre feuille de style principale en y faisant référence via le nom du module :

1body {
2  color: variables.$text-color;
3  background-color: variables.$bg-color;
4}

Découper le code en morceaux plus petits et gérables est un aspect clé du maintien d'un code CSS propre et organisé. Grâce aux partials et aux modules, Sass facilite grandement cette tâche.

Exercice : créer un projet avec des partials et des modules Sass

Objectifs de l'exercice

1. Créer une structure de projet Sass en utilisant des partials et des modules.
2. Organiser les styles en modules tels que les variables, les mixins et les styles de composants.
3. Importer et utiliser les modules dans la feuille de style principale.

Étape 1 : structure des fichiers

Crée la structure de fichiers suivante pour le projet :

1project/
2|-- scss/
3|   |-- _variables.scss
4|   |-- _mixins.scss
5|   |-- _buttons.scss
6|   |-- _header.scss
7|   |-- main.scss
8|-- index.html

Étape 2 : définir les variables et les mixins

Dans le fichier _variables.scss, définis quelques variables :

1// _variables.scss
2$text-color: #333;
3$bg-color: #f9f9f9;
4$primary-color: #007bff;
5$padding: 20px;

Dans le fichier _mixins.scss, définis quelques mixins utiles :

1// _mixins.scss
2@mixin center-flex {
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Étape 3 : styliser les composants

Dans le fichier _buttons.scss, définis les styles des boutons :

1// _buttons.scss
2@use 'variables';
3
4.button {
5  background-color: variables.$primary-color;
6  color: #fff;
7  padding: variables.$padding;
8  border: none;
9  border-radius: 5px;
10
11  &:hover {
12    background-color: darken(variables.$primary-color, 10%);
13  }
14}

Dans le fichier _header.scss, définis les styles de l'en-tête :

1// _header.scss
2@use 'variables';
3@use 'mixins';
4
5.header {
6  background-color: variables.$primary-color;
7  color: #fff;
8  padding: variables.$padding;
9
10  .header-content {
11    @include mixins.center-flex;
12    flex-direction: column;
13  }
14}

Étape 4 : importer les partials et les modules

Dans le fichier main.scss, importe tous les partials et modules :

1// main.scss
2@use 'variables';
3@use 'mixins';
4@use 'buttons';
5@use 'header';

Étape 5 : compiler le Sass

Utilise un outil de compilation Sass (par exemple node-sass, Dart Sass, ou le préprocesseur de ton éditeur) pour générer le fichier CSS (main.css) à partir du fichier Sass (main.scss).

Étape 6 : HTML

Crée un fichier index.html et ajoute la structure suivante :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Sass Project</title>
7  <link rel="stylesheet" href="css/main.css">
8</head>
9<body>
10  <header class="header">
11    <div class="header-content">
12      <h1>Welcome to our website</h1>
13      <button class="button">Click me</button>
14    </div>
15  </header>
16</body>
17</html>

Exercice

1. Ajouter de nouveaux composants : ajoute un nouveau partial _footer.scss et définis les styles du pied de page. Importe-le dans main.scss et ajoute le HTML correspondant dans index.html.
2. Étendre le mixin : étends le mixin center-flex pour qu'il accepte des arguments optionnels pour justify-content et align-items.
3. Utiliser de nouvelles variables : ajoute de nouvelles variables à _variables.scss, par exemple pour les couleurs d'accent et les marges, et utilise-les dans d'autres styles.
4. Refactorisation du code : réorganise les styles dans les fichiers partials pour qu'ils soient plus modulaires et plus faciles à gérer.

Cet exercice te permettra de tirer pleinement parti de la puissance des partials et des modules dans Sass, en créant un projet organisé et évolutif.

1<!DOCTYPE html>
2<html lang="en">
3<head><title>Cases à cocher</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Cases à cocher</h1>
6<input type="checkbox"> Or <input type="checkbox"> Gemmes
7</body>
8</html>