Liste
SASS permet de créer des listes de variables. Des listes indexées et des listes associatives.
Pour les utiliser, il faut importer les objets les représentant.
Définition : List
liste de valeurs
1
@use 'sass:list';
2
$couleurs : reb, green, blue, white;
Définition : list.nth($list, $nb)
Retourne une valeur en fonction de son rang.
1
@use 'sass:list';
2
$couleurs : reb, green, blue, white;
3
4
li {5
color : list.nth($couleurs, 2);
6
}
Ce qui donne :
1
li {2
color : green;
3
}
Définition : list.join($list1, $list2)
Fusionne les listes
1
@use "sass:list";
2
$list1 : (#007bff, #5a6268);
3
$list2 : (#28a745, #bd2130);
4
$list : list.join($list1, $list2); // (#007bff, #5a6268, #28a745, #bd2130)
Définition : map
liste associative (clé : valeur)
1
@use "sass:map";
2
$couleurs : (primary:#007bff, secondary: #5a6268, succes: #28a745, danger: #bd2130);
Définition : map.get($map, $key)
Retourne la valeur d'un élément en fonction de sa clé.
1
@use "sass:map";
2
$couleurs : (primary:#007bff, secondary: #5a6268, succes: #28a745, danger: #bd2130);
3
li {4
color : map.get($couleurs, secondary);
5
}
Ce qui donne :
1
li {2
color : #5a6268;
3
}
Définition : map.merge($map1, $map2)
Fusionne les listes
1
@use "sass:map";
2
$map1 : (primary:#007bff, secondary: #5a6268);
3
$map2 : (succes: #28a745, danger: #bd2130);
4
$map : map.merge($map1, $map2); //(primary:#007bff, secondary: #5a6268, succes: #28a745, danger: #bd2130)