Les maps dans SASS

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 de button-danger sera null.

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 au body.

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.

YouTube Video