Comment générer le CSS avec boucle en moins

Je ne suis pas familier avec Less. Dans ma compréhension, je pense Less peut transformer le less format de fichier standard css fichier(si je me trompe, corrigez-moi). Maintenant j'ai une question ci-dessous.

Dire que vous ne générez 100 classes CSS comme ci-dessous(à partir de .span1 à .span100) dans un seul fichier CSS. Je veux savoir si less pouvez générer un fichier CSS comme ça?

...
.span5 {
  width: 5%;
}

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}

C'est parfaitement légitime question et c'est exactement celui que j'avais. S'il vous plaît ré-ouvrir ce.

InformationsquelleAutor Joe.wang | 2013-03-06

47

Essayer si vous utilisez la version la plus récente de MOINS:
```
@iterations: 5;
.span-loop (@i) when (@i > 0) {
    .span-@{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);
```
De sortie:
```
.span-5 {
  width: 5%;
}
.span-4 {
  width: 4%;
}
.span-3 {
  width: 3%;
}
.span-2 {
  width: 2%;
}
.span-1 {
  width: 1%;
}
```
Vous pouvez l'essayer sur less2css.

Modifier Le 3 Avril 2014

Ici est une version plus souple avec plus d'options:
```
.custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1  ; @selector:~".span-"; @property : width)
when not(@n=0)  {

  @size : @base-value+@_s;
  @{selector}@{j}{
    @{property} : ~"@{size}@{unit}";
  }
  .custom-loop(@base-value ,  (@n - 1), @unit , (@j + 1) ,  (@_s+@step-size) , @step-size,  @selector, @property);
}
```
Vous pouvez l'appeler ce que par @n qui est l'argument requis:
```
.custom-loop(@n:3);
```
Qui sera de sortie:
```
.span-1 {
  width: 3px;
}
.span-2 {
  width: 4px;
}
.span-3 {
  width: 5px;
}
```
Mais si vous voulez avoir le contrôle sur chaque paramètre, voici un exemple d'utilisation de tous les paramètres personnalisés:
```
.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);
```
Ce sera de sortie:
```
.fs-1 {
  font-size: 1%;
}
.fs-2 {
  font-size: 3%;
}
.fs-3 {
  font-size: 5%;
}
```
Les descriptions des paramètres
1. @n : entier, Le nombre d'itérations.
2. @base de la valeur (facultatif): entier, La valeur de départ pour la boucle pour être affectée à la propriété. La valeur par défaut est de même pour la valeur attribuée pour le nombre d'itérations @n.
3. @unité (facultatif): chaîne, L'unité de la propriété. La valeur par défaut est px.
4. @property (facultatif): de chaîne non ou chaîne La propriété CSS. La valeur par défaut est width
5. @sélecteur de (facultatif): échappé à la chaîne, Le sélecteur utilisé pour la boucle. Pourrait être n'importe quoi tant qu'il est transmis sous la forme d'un échappé de la chaîne.
6. @étape-taille (facultatif): entier, La valeur par laquelle la boucle par incréments.
NOTES

Note 1: La coutume sélecteur est transmis comme un échappé de la chaîne. Si elle n'est pas échappé, il ne va pas fonctionner comme prévu.

Note 2: Le mixin est appelé en utilisant explicitement le nom du paramètre. Cela a des avantages et des inconvénients:

Note 3: L'unité est transmis sous la forme d'une chaîne de caractères.

Avantages
1. Il est évident que le paramètre est appelé
2. Vous n'avez pas à compter sur l'ordre des paramètres et n'oubliez pas de paramètre qui vient en premier, deuxième, ...
Inconvénients
1. Je suppose que c'est un peu laid ?
2. (ajouter à la liste et/ou de modifier la mise en œuvre si vous connaissez un meilleur)
- Seulement cette syntaxe fonctionne avec less.php (leafo), merci !
InformationsquelleAutor AJ Meyghani
20

Tous, j'ai trouvé un moyen de sortie de css dans la boucle. veuillez passer en revue .merci.
```
@iterations: 100;

//helper class, will never show up in resulting css
//will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

    //create the actual css selector, example will result in
    //.myclass_30, .myclass_28, .... , .myclass_1
    (~".span@{index}") {
        //your resulting css
        width: percentage((@index - 1) *0.01);
    }

    //next iteration
    .loopingClass(@index - 1);
}

//end the loop when index is 0
.loopingClass (0) {}

//"call" the loopingClass the first time with highest value
.loopingClass (@iterations);
```
- Veuillez vous reporter au Moins le code source de Bootstrap (à savoir mixin.de moins en moins). Rechercher ".spanX" de la chaîne, j'espère que c'est à côté de ce que tu veux obtenir.
- Oui , Veuillez consulter la réponse que j'ai posté par moi-même . merci.
- Vous utilisez garde avec un récursif mixin comme l'ont fait les auteurs de Bootstrap.
- S'il vous plaît tête de ce post: Faire une boucle avec MOINS de css.
- le code ne fonctionnait pas less2css.org. Donc, j'ai joué et obtenu ceci:` @itérations: 100; .loopingClass (@index) à l' (@index > 0) { .span@{index} { largeur: pourcentage((@index ) *0.01); } .loopingClass(@index - 5); } .loopingClass (0) {} .loopingClass (@itérations);` @itérations: 100; .loopingClass (@index) à l' (@index > 0) { .span@{index} { largeur: pourcentage((@index ) *0.01); } .loopingClass(@index - 5); } .loopingClass (0) {} .loopingClass (@itérations); `
InformationsquelleAutor Joe.wang

Il est impossible de faire à l'intérieur de méthodes.

Comment générer le CSS avec boucle en moins

Mais possible comme ceci:

.loopingClass (@index) when (@index > 0){
  .span_@{index}{
    width: @index px;
  }
  .loopingClass(@index - 1);
}
.loopingClass(5);

Resilt sera comme ceci:

.span_100 {
  width: 100 px;
}
.span_99 {
  width: 99 px;
}
.span_98 {
  width: 98 px;
}
.span_97 {
  width: 97 px;
}
.span_96 {
  width: 96 px;
}
.span_95 {
  width: 95 px;
}

and e.t.c.

Veuillez ajouter la réponse avec le code ou le violon. image de code est considéré comme une mauvaise réponse
N'est-ce pas répondre à un double de @Amin réponse?

InformationsquelleAutor FlamesoFF

Vous devez vous connecter pour publier un commentaire.

Modifier Le 3 Avril 2014

Ici est une version plus souple avec plus d'options:

Les descriptions des paramètres

NOTES