Les maps dans SASS
Cet article explique les maps dans SASS.
Nous expliquerons les bases jusqu'à l'utilisation avancée des maps SASS, avec des exemples pratiques.
YouTube Video
Les maps dans SASS
Qu'est-ce qu'une map dans SASS ?
Une map dans SASS est une structure de données qui contient des paires clé-valeur, semblable aux objets en JavaScript ou aux dictionnaires en Python. En utilisant les maps dans SASS, vous pouvez gérer des styles complexes de façon concise et améliorer la maintenabilité.
Syntaxe de base des maps
Les maps dans SASS sont définies à l'aide de ()
(parenthèses). La syntaxe est la suivante :.
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);
Par exemple, pour créer une map afin de gérer des thèmes de couleurs, vous pouvez la définir comme ci-dessous :.
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
Obtenir des valeurs à partir d'une map
Dans SASS, vous utilisez la fonction map.get()
pour extraire une valeur d'une map.
Exemple d'utilisation :
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}
Résultat :
1.button {
2 background-color: #3498db;
3}
- Ce code récupère la valeur de la couleur
primary
depuis la map$colors
et l'applique à la couleur de fond du bouton.
Définir des clés et des valeurs dans une map
En utilisant la fonction map.set()
, vous pouvez assigner une nouvelle valeur à une clé spécifiée. Si la clé existe déjà, sa valeur sera écrasée.
Exemple d'utilisation
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}
- Ce code ajoute une clé
danger
à la map et définit sa valeur comme couleur de fond du bouton.
Résultat
1.button-danger {
2 background-color: #e74c3c;
3}
Supprimer des clés d'une map
En utilisant la fonction map.remove()
, vous pouvez supprimer une clé spécifique et sa valeur d'une map.
Exemple d'utilisation
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}
- Ce code supprime la clé
danger
de la map, donc la couleur de fond debutton-danger
seranull
.
Résultat
1.button-primary {
2 background-color: #3498db;
3}
Ajouter des clés et des valeurs à une map
Avec la fonction map.merge()
, vous pouvez ajouter de nouvelles clés et valeurs à une map existante.
Exemple d'utilisation
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}
- Ce code ajoute une clé
danger
à une map SASS existante et définit sa couleur comme couleur de fond du bouton.
Résultat
1.button-danger {
2 background-color: #e74c3c;
3}
Ajouter plusieurs clés et valeurs à une map
Avec la fonction map.merge()
, vous pouvez ajouter plusieurs nouvelles clés et valeurs à une map existante en une seule fois.
Exemple d'utilisation
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}
- Ce code ajoute simultanément plusieurs clés et valeurs à une map SASS existante.
Vérifier des clés dans une map
La fonction map.has-key()
vous permet de vérifier si une clé spécifique existe dans une map.
Exemple d'utilisation
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // false
Obtenir toutes les clés ou valeurs d'une map
Obtenir toutes les clés
En utilisant la fonction map.keys()
, vous pouvez obtenir toutes les clés.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)
Obtenir toutes les valeurs
En utilisant la fonction map.values()
, vous pouvez obtenir toutes les valeurs.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)
Boucler à travers une map
Dans SASS, vous pouvez utiliser la directive @each
pour itérer sur une map.
Exemple d'utilisation
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}
- Ce code parcourt chaque clé et valeur d'une map SASS et génère automatiquement une classe pour chaque couleur.
Résultat
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}
Gérer les maps imbriquées
Les maps peuvent aussi avoir une structure imbriquée. Dans ce cas, utilisez des fonctions map.get()
imbriquées.
Exemple d'utilisation
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}
- Ce code récupère les couleurs d'arrière-plan et du texte pour le thème
light
depuis une map SASS imbriquée et les applique aubody
.
Résultat
1body {
2 background-color: #ffffff;
3 color: #000000;
4}
Cas d'utilisation des maps : design responsive
Grâce aux maps, vous pouvez facilement gérer les media queries et le design responsive.
Exemple d'utilisation
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}
- Ce code utilise une map SASS pour générer automatiquement des classes de conteneur responsive pour chaque breakpoint.
Résultat
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}
Conclusion
Les maps SASS sont un outil puissant pour organiser votre feuille de style, accroître la flexibilité et la réutilisabilité. Elles peuvent être utilisées dans de nombreux scénarios, comme la gestion de valeurs, les boucles, et la mise en œuvre du design responsive.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.