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 <a href="https://sass-lang.com/">le language de preprocessing SASS</a>.

Vous pouvez voir ce que donnent les compilations sass en ligne et vous exercer sur <a href="https://sassmeister.com/">sassmeister.com</a>

<code class="scss"> </code>

ensuite il vous faudra des classes pour appliquer ces couleurs sur vos lignes.

<code class="scss">/** 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₈; }</code>

<code class="scss"></code> Et si vous voulez personnaliser tout ça dans un mixin pour choisir que colorer avec vos variables, c'i possible! <div>

Admettons que, comme ci dessus l'on veuille une classe pour chaque ligne afin de colorer une bordure. <div>Pour ça on va utiliser des tableaux associatifs(clé: valeur), sta dire des <strong>maps</strong>,</div> <div>et des tableaux non associatifs, des <strong>listes </strong>(élément1, élément2).</div> <div>On définit une map de famille de transport (métro, tram, rer), puis une couleur pour chaque ligne.</div> <div>Puis on définit notre <strong>@mixin</strong> qui fait une classe avec bordure correspondante.</div> <div>grâce à l'interpolation de variable on peut faire des noms de classe css (et d'autres choses) dynamiques.</div> <div>exemple:</div> <div><code>$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }</code></div> <div>Allez donc voir <a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#map-functions">les quelques fonctions existantes sur les maps.</a> Ici on se servira uniquement de celle qui retourne la valeur pour une clé donnée.</div> <div>Avec <strong>@each</strong> on va parcourir notre map et créer des classes en conséquence avec notre mixin, appelé par la directive <strong>@include</strong>.</div> <div>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à!</div> <code> // variables de couleurs $metro₁: #fdce00; $metro₂: #0267af; $metro₃: #a1971b; $metro_3BIS: #96d7dd; $metro₄: #b74288; $metro₅: #de8b53; $metro₆: #79bb92; $metro₇: #e8a8b8; $metro_7BIS: #7cc485; $metro₈: #cfa9d0; $metro₉: #cec92b; $metro₁₀: #dfb039; $metro₁₁: #8e6538; $metro₁₂: #328e5b; $metro₁₃: #a0cccb; $metro₁₄: #612684; $tram₁: #0564b1; $tram₂: #c74896; $tram₃: #90613b; $tram_3a: #90613b; $tram_3b: #ec8a42; $tram₄: #fcc11b; $tram₅: #0564b1; $tram₆: #ec5738; $tram₇: #90613b; $tram₈: #999738; $rer_a: #cf532e; $rer_b: #5191cd; // maps de couleurs $metro_colors: ( '1' : $metro₁, '2': $metro₂, '3':$metro₃, // etc ); $tram_colors: ( '1' : $tram₁, '2': $tram₂, // etc ); $rer_colors: ('a' : $rer_a, 'b': $rer_b); // map de famille $sisi_lafamille: ( '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_lafamille, $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_lafamille { @each $key, $val in $list { // traitement différent pour les trams @if ($famille == 'tram') { @include tram($key, $val); } @else { @include lineBorder($famille, $key); } } }</code> <div>Enjoy!</div> </div>

Liens

• cipherbliss Cipherbliss blog