IP Girl
  1. IP Girl
  3. Boucle à travers un tableau de noms de variables dans Less
Intereting Posts
Impossible de démarrer Emulator dans android studio 2.0 Comment enregistrer webcam et audio en utilisant webRTC et une connexion Peer basée sur le serveur Créer des variables de configuration dans sails.js? Reconstruire le conteneur après chaque modification? Comment définir le code d’état HTTP à partir d’ASP.NET MVC 3? convertir CSV / XLS en JSON? Comment puis-je filtrer les lignes en charge dans la fonction Pandas read_csv? Réinitialiser Android textview maxlines Tiroir de navigation semi-transparent sur la barre d’état ne fonctionne pas Comment obtenir un tableau de toutes les valeurs enum en C #? Dois-je créer des ancres HTML avec ‘name’ ou ‘id’? Qu’est-ce que le partitionnement MYSQL? En Java, quelle est la différence entre this.method () et method ()? Quand utiliser des acteurs au lieu de solutions de messagerie telles que WebSphere MQ ou Tibco Rendezvous? “Websocket a été interrompu pendant le chargement de la page” sur Firefox pour Socket.io

Boucle à travers un tableau de noms de variables dans Less

Dans notre application, nous avons une liste prédéfinie de couleurs parmi lesquelles un utilisateur peut choisir et tout ce qui concerne cet utilisateur aura cette couleur.

Tout au long de l’application, nous aurons différents modules avec la couleur jointe en tant que nom de classe.

par exemple. 

 ...

Nous utilisons moins pour notre CSS.

Dans un certain nombre d’endroits, nous faisons des choses comme ceci: 

 .example_module.green { background: @green; } .example_module.red { background: @red; } .example_module.blue { background: @blue; } etc

J’aimerais pouvoir définir tous ces noms de couleurs sous forme de tableau et les parcourir. Si nous ajoutons des couleurs à l’avenir, il suffit de l’append à un endroit.

Pseudo code: 

 @colors: ['green', 'red', 'blue']; for each @color in @colors { .example_module.@color { background: @color; } }

Est-ce que quelque chose comme ça est même supporté dans MOINS?

Voir les boucles . Par exemple (en supposant que les @green , @red , @blue sont définies ailleurs): 

 @colors: green, red, blue; .example_module { .-(@i: length(@colors)) when (@i > 0) { @name: extract(@colors, @i); &.@{name} {background: @@name} .-((@i - 1)); } .-; }

– – –

Dans Modern Less, la même chose peut être plus simple à l’aide du plugin Lists : 

 @colors: green, red, blue; .for-each(@name in @colors) { .example_module.@{name} { background: @@name; } }

– – –

Et en inheritance Moins le sucre syntaxique peut être atteint en utilisant: 

 @import "for"; @colors: green, red, blue; .example_module { .for(@colors); .-each(@name) { &.@{name} {background: @@name} } }

Vous pouvez trouver ici l’ extrait de code "for" importé (c’est juste un mixeur de wrapper pour les boucles Less récursives) (avec des exemples ici et ici ).

Ce mixin fonctionne bien pour moi. Le deuxième paramètre est un bloc de code qui a access à l’itération en cours elem (@value) et à l’index (@i).

  1. Définir le mixin: 

     .for(@list, @code) { & { .loop(@i:1) when (@i =< length(@list)) { @value: extract(@list, @i); @code(); .loop(@i + 1); } .loop(); } }

  2. Utilisation: 

     @colors: #1abc9c, #2ecc71, #3498db, #9b59b6; .for(@colors, { .color-@{i} { color: @value; } });

  3. Résultat css: 

     .color-1 { color: #1abc9c; } .color-2 { color: #2ecc71; } .color-3 { color: #3498db; } .color-4 { color: #9b59b6; }
  1. Définir le mixin: 
 .foreach(@list, @body, @i: length(@list)) when (@i>0) { .foreach(@list, @body, @i - 1); @n: length(@list); @value: extract(@list, @i); @body(); /* you can use @value, @i, @n in the body */ }
  1. Usage: 
 .example-module { .foreach (red green blue, { &.@{value} { color: @value; } }); }

Un autre exemple: 

 .nth-child (@list, @style) { .foreach(@list, { @formula: e(%("%dn+%d", @n, @i)); &:nth-child(@{formula}) { @style(); } }); } tr { .nth-child (#bbb #ccc #ddd #eee, { background: @value; }); }