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_1 {
background: $metro_1 !important;
}
.metro_2 {
background: $metro_2;
}
.metro_3 {
background: $metro_3;
}
.metro_3BIS {
background: $metro_3BIS;
}
.metro_4 {
background: $metro_4;
}
.metro_5 {
background: $metro_5;
}
.metro_6 {
background: $metro_6;
}
.metro_7 {
background: $metro_7;
}
.metro_7BIS {
background: $metro_7BIS;
}
.metro_8 {
background: $metro_8;
}
.metro_9 {
background: $metro_9;
}
.metro_10 {
background: $metro_10;
}
.metro_11 {
background: $metro_11;
}
.metro_12 {
background: $metro_12;
}
.metro_13 {
background: $metro_13;
}
.metro_13BIS {
background: $metro_13;
}
.metro_14 {
background: $metro_14;
}
/** trams **/
.tram_1 {
color: $tram_1;
border: solid 3px $tram_1;
}
.tram_2 {
color: $tram_2;
border-color: $tram_2;
}
.tram_3 {
color: $tram_3;
border-color: $tram_3;
}
.tram_4 {
color: $tram_4;
border-color: $tram_4;
}
.tram_5 {
color: $tram_5;
border-color: $tram_5;
}
.tram_6 {
color: $tram_6;
border-color: $tram_6;
}
.tram_7 {
color: $tram_7;
border-color: $tram_7;
}
.tram_8 {
color: $tram_8;
border-color: $tram_8;
}
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.
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
// 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);
}
}
}