les couleurs de la RATP dans SASS

si vous avez dans l'idée de faire un petit projet web incluant les couleurs des lignes de métro / RER / Tram parisien, voici les codes couleurs choppées à coup de pipette (on peut aussi trouver ces codes hexadécimaux sur wikipedia).Vous pouvez les utiliser dans votre css avec ces variables faites pour le language de preprocessing SASS.Vous pouvez voir ce que donnent les compilations sass en ligne et vous exercer sur sassmeister.com= =ensuite il vous faudra des classes pour appliquer ces couleurs sur vos lignes.=/** metros**/.metro₁ {background: $metro₁ !important;}.metro₂ {background: $metro₂;}.metro₃ {background: $metro₃;}.metro_3BIS {background: $metro_3BIS;}.metro₄ {background: $metro₄;}.metro₅ {background: $metro₅;}.metro₆ {background: $metro₆;}.metro₇ {background: $metro₇;}.metro_7BIS {background: $metro_7BIS;}.metro₈ {background: $metro₈;}.metro₉ {background: $metro₉;}.metro₁₀ {background: $metro₁₀;}.metro₁₁ {background: $metro₁₁;}.metro₁₂ {background: $metro₁₂;}.metro₁₃ {background: $metro₁₃;}.metro_13BIS {background: $metro₁₃;}.metro₁₄ {background: $metro₁₄;}/** trams **/.tram₁ {color: $tram₁;border: solid 3px $tram₁;}.tram₂ {color: $tram₂;border-color: $tram₂;}.tram₃ {color: $tram₃;border-color: $tram₃;}.tram₄ {color: $tram₄;border-color: $tram₄;}.tram₅ {color: $tram₅;border-color: $tram₅;}.tram₆ {color: $tram₆;border-color: $tram₆;}.tram₇ {color: $tram₇;border-color: $tram₇;}.tram₈ {color: $tram₈;border-color: $tram₈;}=Et si vous voulez personnaliser tout ça dans un mixin pour choisir que colorer avec vos variables, c'i possible!

Admettons que, comme ci dessus l'on veuille une classe pour chaque ligne afin de colorer une bordure.

Pour ça on va utiliser des tableaux associatifs(clé: valeur), sta dire des maps,

et des tableaux non associatifs, des listes (élément1, élément2).

On définit une map de famille de transport (métro, tram, rer), puis une couleur pour chaque ligne.

Puis on définit notre @mixin qui fait une classe avec bordure correspondante.

grâce à l'interpolation de variable on peut faire des noms de classe css (et d'autres choses) dynamiques.

exemple:

$name: foo;$attr: border;p.#{$name} {#{$attr}-color: blue;}

Allez donc voir les quelques fonctions existantes sur les maps. Ici on se servira uniquement de celle qui retourne la valeur pour une clé donnée.

Avec @each on va parcourir notre map et créer des classes en conséquence avec notre mixin, appelé par la directive @include.

Ensuite si on veut que nos classes soient différentes pour les métros et les trams on a plus qu'a faire un autre mixin, et voilà!

// variables de couleurs$metro_1: #fdce00;$metro_2: #0267af;$metro_3: #a1971b;$metro_3BIS: #96d7dd;$metro_4: #b74288;$metro_5: #de8b53;$metro_6: #79bb92;$metro_7: #e8a8b8;$metro_7BIS: #7cc485;$metro_8: #cfa9d0;$metro_9: #cec92b;$metro_10: #dfb039;$metro_11: #8e6538;$metro_12: #328e5b;$metro_13: #a0cccb;$metro_14: #612684;$tram_1: #0564b1;$tram_2: #c74896;$tram_3: #90613b;$tram_3a: #90613b;$tram_3b: #ec8a42;$tram_4: #fcc11b;$tram_5: #0564b1;$tram_6: #ec5738;$tram_7: #90613b;$tram_8: #999738;$rer_a: #cf532e;$rer_b: #5191cd;// maps de couleurs$metro_colors: ('1' : $metro_1,'2': $metro_2,'3':$metro_3,// etc);$tram_colors: ('1' : $tram_1,'2': $tram_2,// etc);$rer_colors: ('a' : $rer_a,'b': $rer_b);// map de famille$sisi_la_famille: ('metro' : $metro_colors,'tram' : $tram_colors,'rer' : $rer_colors,);// mettre une bordure à gauche selon la famille et le numéro de ligne@mixin lineBorder($famille,$nom) {$famille_map: map-get($sisi_la_famille, $famille);.#{$famille}_#{$nom} {border-left: 3px solid map-get($famille_map, $nom);}}// faire un style différent pour les trams@mixin tram($nom,$color) {.tram_#{$nom} {color: $color;border-color: $color;}}@warn "yeah";// boucle-ception@each $famille, $list in $sisi_la_famille {@each $key, $val in $list {// traitement différent pour les trams@if ($famille = 'tram') {@include tram($key, $val);} @else {@include lineBorder($famille, $key);}}}=

Enjoy!