web-dev-qa-db-fra.com

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

Je ne connais pas Less. À ma connaissance, je pense que Less peut transformer le fichier de format less en fichier standard css (si je me trompe, veuillez me corriger). Maintenant, j'ai une question ci-dessous.

Supposons que vous génériez 100 classes CSS comme ci-dessous (à partir de .span1 à .span100) dans un seul fichier CSS. Je veux savoir si less peut générer un fichier CSS comme celui-ci?

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

.span4 {
  width: 4%;
}

.span3 {
  width: 3%;
}

.span2 {
  width: 2%;
}

.span1 {
  width: 1%;
}
csscss3less
30
Joe.wang

Tout, j'ai trouvé une manière de produire le CSS en boucle. merci de l'examiner .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);
20
Joe.wang

Essayez ceci si vous utilisez la dernière version de LESS:

@iterations: 5;
.span-loop (@i) when (@i > 0) {
    .span-@{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);

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

Voici une version plus flexible 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 appeler cela uniquement par @n qui est l'argument requis:

.custom-loop(@n:3);

Qui produira:

.span-1 {
  width: 3px;
}
.span-2 {
  width: 4px;
}
.span-3 {
  width: 5px;
}

Mais si vous souhaitez contrôler chaque paramètre, voici un exemple utilisant tous les paramètres personnalisés:

.custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);

Cela produira:

.fs-1 {
  font-size: 1%;
}
.fs-2 {
  font-size: 3%;
}
.fs-3 {
  font-size: 5%;
}

Descriptions des paramètres

  1. @ n : entier, Le nombre d'itérations.

  2. @ valeur de base (facultatif): entier, La valeur de départ de la boucle à affecter à la propriété. La valeur par défaut est la même que la valeur affectée au nombre d'itérations @n.

  3. @ unit (facultatif): string, l'unité de la propriété. La valeur par défaut est px.

  4. @ property (facultatif): non-string ou string La propriété CSS . La valeur par défaut est width

  5. @ selector (facultatif): chaîne d'échappement, Le sélecteur utilisé pour la boucle. Peut être n'importe quoi tant qu'il est transmis sous forme de chaîne d'échappement.

  6. @ step-size (facultatif): entier, la valeur par laquelle la boucle augmente.

REMARQUES

Remarque 1: Le sélecteur personnalisé est transmis sous forme de chaîne d'échappement. S'il n'est pas échappé, il ne fonctionnera pas comme prévu.

Remarque 2: Le mixin est appelé en utilisant explicitement le nom du paramètre. Cela présente certains avantages et inconvénients:

Remarque 3: L'unité est transmise sous forme de chaîne.

Avantages

  1. Il est clair quel paramètre est appelé
  2. Vous n'avez pas à vous fier à l'ordre des paramètres et à vous rappeler quel paramètre vient en premier, en second,…

Inconvénients

  1. Je suppose que ça a l'air un peu moche?
  2. (ajouter à la liste et/ou modifier l'implémentation si vous en connaissez une meilleure)
46
AJ Meyghani

Il est impossible de le faire avec des méthodes données.

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.
2
FlamesoFF