Les mixins dans Sass

Les mixins dans Sass te permettent de définir des styles réutilisables dans toute la feuille de style sans répéter de code. Les mixins sont particulièrement utiles lorsque tu dois utiliser les mêmes déclarations CSS à plusieurs endroits.

Définir un mixin

Pour définir un mixin, utilise la directive @mixin suivie du nom du mixin. Par exemple :

1@mixin reset-list {
2  margin: 0;
3  padding: 0;
4  list-style: none;
5}

Utiliser un mixin

Pour utiliser un mixin, utilise la directive @include suivie du nom du mixin. Par exemple :

1ul, ol {
2  @include reset-list;
3}

Après compilation du code ci-dessus en CSS, on obtient :

1ul, ol {
2  margin: 0;
3  padding: 0;
4  list-style: none;
5}

Les mixins avec des arguments

Les mixins dans Sass peuvent aussi accepter des arguments, ce qui les rend encore plus flexibles. Par exemple, on peut créer un mixin qui génère des styles pour des boutons de différentes couleurs :

1@mixin button-color($color) {
2  background-color: $color;
3  color: white;
4  &:hover {
5    background-color: darken($color, 10%);
6  }
7}
8
9.button-primary {
10  @include button-color(blue);
11}
12
13.button-danger {
14  @include button-color(red);
15}

Après compilation en CSS, on obtient :

1.button-primary {
2  background-color: blue;
3  color: white;
4}
5.button-primary:hover {
6  background-color: darkblue;
7}
8
9.button-danger {
10  background-color: red;
11  color: white;
12}
13.button-danger:hover {
14  background-color: darkred;
15}

Comme tu peux le voir, les mixins sont un outil très puissant dans Sass qui te permet de simplifier considérablement ton code et d'augmenter sa réutilisabilité. N'oublie toutefois pas de les utiliser avec modération pour éviter de complexifier inutilement ton code.

Exercice : créer et utiliser des mixins dans un projet Sass

Objectifs de l'exercice

1. Créer des mixins pour réinitialiser les listes, créer des boutons et configurer des mises en page.
2. Appliquer les mixins créés à différents éléments de la page.
3. Refactoriser du code CSS existant à l'aide de mixins.

Étape 1 : structure des fichiers

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

1project/
2|-- scss/
3|   |-- _mixins.scss
4|   |-- main.scss
5|-- css/
6|   |-- main.css
7|-- index.html

Étape 2 : définir les mixins

1. Réinitialiser les listes

Dans le fichier _mixins.scss, définis un mixin reset-list qui réinitialise les styles de liste :

1// _mixins.scss
2@mixin reset-list {
3  margin: 0;
4  padding: 0;
5  list-style: none;
6}

2. Créer des boutons

Ajoute un mixin button-style qui permet de créer des boutons de différentes couleurs :

1// _mixins.scss
2@mixin button-style($color) {
3  background-color: $color;
4  color: white;
5  padding: 10px 20px;
6  border: none;
7  border-radius: 5px;
8  cursor: pointer;
9  &:hover {
10    background-color: darken($color, 10%);
11  }
12}

3. Mise en page

Ajoute un mixin center-flex qui centre les éléments à l'aide de flexbox :

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

Étape 3 : utiliser les mixins

Dans le fichier main.scss, importe les mixins et utilise-les pour styliser les éléments :

1// main.scss
2@use 'mixins';
3
4ul, ol {
5  @include mixins.reset-list;
6}
7
8.button-primary {
9  @include mixins.button-style(blue);
10}
11
12.button-danger {
13  @include mixins.button-style(red);
14}
15
16.container {
17  @include mixins.center-flex;
18  height: 100vh;
19}

Étape 4 : 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  <div class="container">
11    <ul>
12      <li>Element 1</li>
13      <li>Element 2</li>
14      <li>Element 3</li>
15    </ul>
16    <button class="button-primary">Primary Button</button>
17    <button class="button-danger">Danger Button</button>
18  </div>
19</body>
20</html>

É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).

Exercice

1. Ajouter de nouveaux mixins : crée un mixin box-shadow qui ajoute une ombre à un élément, et applique-le aux boutons.
2. Utiliser un mixin avec des arguments : crée un mixin qui définit des marges avec des arguments pour les marges haut, droite, bas et gauche, et applique-le à la liste.
3. Étendre la mise en page : crée un mixin layout-grid qui dispose les éléments dans une grille, et applique-le au conteneur.
4. Optimisation du code : analyse le code et utilise des mixins pour le rendre plus modulaire et plus facile à maintenir.

Cet exercice t'aidera à comprendre comment définir et utiliser des mixins dans Sass, pour aboutir à un code CSS plus organisé et plus efficace.

1<!DOCTYPE html>
2<html lang="en">
3<head><title>Champs de texte</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Champs de texte</h1>
6<p>Input type=text - comme un papyrus pour écrire.</p>
7</body>
8</html>