web-dev-qa-db-fra.com

Parcourez 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 être choisi et tout ce qui concerne cet utilisateur aura cette couleur.

Tout au long de l'application, nous aurons différents modules avec la couleur attachée comme nom de classe.

par exemple.

<div class="example_module green">
  ...
</div>

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, nous n'avons qu'à l'ajouter au même 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 pris en charge dans LESS?

loopsless
48
Jason Varga

Voir Boucles . Par exemple (en supposant que les variables @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 dans Legacy Less, le sucre syntaxique peut être obtenu en utilisant:

@import "for";

@colors: green, red, blue;

.example_module {
    .for(@colors); .-each(@name) {
        &.@{name} {background: @@name}
    }
}

Où l'extrait "for" Importé (c'est juste un mixage wrapper pour les boucles Less récursives) peut être trouvé ici (avec des exemples ici et ici ).

83
seven-phases-max

Ce mixin fonctionne bien pour moi. Le deuxième paramètre est un bloc de code qui a accès à l'item d'itération actuel (@value) et à l'index (@i).

  1. Définissez 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;
}
14
Ed Kolosovsky

Avec LESS moderne (> = 3.7), vous pouvez utiliser la fonction intégrée each :

/* (assuming @clr-green, @clr-red, @clr-blue variables are defined elsewhere) */
@colors: {
  green: @clr-green;
  red: @clr-red;
  blue: @clr-blue;
}

each(@colors, {
  .example_module.@{key} {
    background: @value;
  }
});
1
eyecatchUp