Organisez votre SASS avec les maps

Lorsque l’on intègre un site web à l’aide d’un préprocesseur SASS, certaines fonctionnalités peuvent être utiles pour simplifier notre code et faciliter sa maintenabilité. C’est par exemple le cas de la propriété maps, qui va ici nous permettre d’avoir un code plus cohérent et structuré.

Définition d’une map SASS

Si vous avez certaines connaissances en Javascript ou PHP, la propriété map correspond aux tableaux associatifs (array). En effet, il est possible d’utiliser un tableau en SASS afin d’organiser certaines propriétés CSS.

Une map est une liste de clés avec des valeurs associés, dont la syntaxe est la suivante :

$map: (
  cle1: valeur1,
  cle2: valeur2,
  cle3: valeur3
);

 

Il est important de respecter cette syntaxe : 

•  Le contenu de la map est entouré de parenthèses
•  Il ne faut pas oublier la virgule après chaque valeur renseignée
•  Les clés doivent être uniques
•  Ces valeurs peuvent correspondre à n’importe quel objet SASS (couleur, nombre, booléen …)

Fonctionnement d’une map

Une fois que notre tableau est créé, nous pouvons utiliser les valeurs définies à l’intérieur. Pour cela, il faut utiliser la fonction map-geten lui passant deux paramètres : le nom de la map ainsi que sa clé.

.block {
  font-size: map-get($map, cle1);
}

Il est possible de vérifier si la clé existe, afin de proposer une solution de remplacement si cette clé n’existe pas dans la map. Pour cela, il faut utiliser la fonction suivante :

$map: (
  cle1: valeur1,
  cle2: valeur2
);

.block {
  @if map-has-key($map, cle1) {
    font-size: map-get($map, cle1);
  } @else {
    font-size : 12px;
  }
}

 

SASS nous offre la possibilité de manipuler les maps entre-elles grâces aux fonctions suivantes :

FONCTION	EXPLICATION
map-get($map, $cle)	Retourne la valeur associée à une clé donnée d’une map.
map-has-key($map, $cle)	Vérifie si une clé existe dans une map.
map-merge($map1, $map2)	Fusionne deux maps dans une nouvelle map.
map-remove($map, $cle(s))	Retourne une nouvelle map tout en enlevant une ou plusieurs clés.
map-keys($map)	Retourne une liste des clés d’une map.
map-values($map)	Retourne une liste des valeurs d’une map.

 

Cependant, certaines fonctions présentent un intérêt limité étant donné qu’il n’est à ce jour pas possible de choisir le numéro d’une clé dans la map.

L’utilisation des maps

Les maps peuvent être utiles dans différents cas de figures. Concrètement, voici trois exemples d’utilisation des maps SASS : 

• L’organisation des couleurs du site :

// Map des différentes couleurs
$colors: (
   gray: (
     base: #ccc,
     light: #f2f2f2,
     dark: #666
   ),
   blue: (
      base: #4c4c4c,
     light: #a5a5ff,
     dark : #00007f
  )
);

// Fonction pour appeler les couleurs facilement
@function setcolor($scheme, $tone: base) {
  @return map-get(map-get($colors, $scheme), $tone);
}

// Appel de la fonction pour afficher la couleur souhaitée
.element {
  color: setcolor(brown,light) ;
}

 

• La génération des classes, afin d’éviter les répétitions de code en utilisant une boucle @each

$icons: (
  music: ‘\f001’,
  search: ‘\f002’,
  heart: ‘\f003’
);

@each $nom, $valeur in $icons {
  .icon--#{$nom}:before {
    content: $valeur;
  }
}

 

• La création de breakpoints, afin de les réutiliser facilement et d’homogénéiser les valeurs utilisées sur tout le site

// Map des breakpoints
$breakpoints: (
  $sm: 576px,
  $md: 768px,
  $lg: 992px,
);

// Mixin pour appeler les breakpoint facilement
@mixin bp($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        $value: map-get($breakpoints, $breakpoint);
         
        @media screen and (min-width: $value) {
            @content;
        }
    }
}

// Dans le SASS
.block {
  display: none;

  @include bp(lg) {
    display: block;
  }
}

Nous avons aussi la possibilité d’utiliser les maps pour toute autre organisation de style que peut vous sembler judicieuse : par exemple, pour la mise en place de templates spécifiques (clair et sombre par exemple), ou pour organiser les différents z-indexutilisés sur le site.

Conclusion

L’utilisation des maps SASS peut être extrêmement utile pour rendre son code plus cohérent et organisé. Cela permet d’éviter la répétition de code CSS et ainsi le rendre plus lisible et donc maintenable.

Il est bien sur possible d’intégrer un site web en utilisant juste une liste de variables plutôt que de recourir aux maps. Cependant, se retrouver avec une grande liste de variables en fin de projet peut se révéler contraignant pour la lisibilité et la maintenabilité du site. Les maps sont une alternative intéressante pour clarifier notre code, il ne faut donc pas hésiter à les utiliser.