Attention: le plugin for.less utilisé dans l’exemple ci-dessous est déprécié selon un commenatire laissé dans le code source de l’auteur. Il faut désormais utiliser List/Array manipulation for Less.
Source: Loop over an array of name value pairs in LESS et mixin sous Git.
CSS color codes & names (tableaux de correspondances Nom de couleur > Code hexadécimal).
Mixin LESS (ne pas oublier d’inclure le mixin for.less) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.Couleur { .facet-mark { &:before { display: inline-block; vertical-align: sub; content: "" !important; width: 18px; height: 18px; border: 1px solid #ededed; } } @facetColors: Beige #DEB887, Blanc #ffffff, Bleu #00b0f0, Gris #777777, Jaune #ffe209, Marron #974706, Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%), Noir #000000, Orange #fb6e05, Rose #ff338a, Rouge #ff0000, Vert #00b050, Violet #800080; .for(@facetColors); .-each(@value) { @name: extract(@value, 1); .@{name} { .facet-mark { &:before { background: extract(@value, 2); } } } } } |
Rendu CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.Couleur .facet-mark:before { display: inline-block; vertical-align: sub; content: "" !important; width: 18px; height: 18px; border: 1px solid #ededed; } .Couleur .Beige .facet-mark:before { background: #000; } .Couleur .Blanc .facet-mark:before { background: #fff; } .Couleur .Bleu .facet-mark:before { background: #00b0f0; } .Couleur .Gris .facet-mark:before { background: #777; } .Couleur .Jaune .facet-mark:before { background: #ffe209; } .Couleur .Marron .facet-mark:before { background: #974706; } .Couleur .Multicolore .facet-mark:before { background: #000; } .Couleur .Noir .facet-mark:before { background: #000; } .Couleur .Orange .facet-mark:before { background: #fb6e05; } .Couleur .Rose .facet-mark:before { background: #ff338a; } .Couleur .Rouge .facet-mark:before { background: red; } .Couleur .Vert .facet-mark:before { background: #00b050; } .Couleur .Violet .facet-mark:before { background: #000; } |