Dynamische Klassennamen im WENIGER

Habe ich die folgenden etwas WENIGER code arbeiten

            @iterations: 940;
            @iterations: 940;
            @col:2.0833333333333333333333333333333%;
            //helper class, will never show up in resulting css
            //will be called as long the index is above 0
            .loopingClass (@index) when (@index > -20) {
                //create the actual css selector, example will result in
                //.myclass_30, .myclass_28, .... , .myclass_1
                (~".gs@{index}") {
                    //your resulting css
                    width: (@index/20+1)*@col;
                }
                //next iteration
                .loopingClass(@index - 60);
            }
            //end the loop when index is 0
            .loopingClass (-20) {}
            //"call" the loopingClass the first time with highest value
            .loopingClass (@iterations);

Gibt es unser grid-system, etwa so:

            .gs940 {
              width: 100%;
            }
            .gs880 {
              width: 93.75%;
            }
            .gs820 {
              width: 87.5%;
            }
            .gs760 {
              width: 81.25%;
            }
            .gs700 {
              width: 75%;
            }

etc etc etc

Nun, was ich tun möchte, ist etwas Mathematik, um die Namen der Klassen zu erzeugen, die folgenden Klassen

etc etc etc

grundsätzlich wäre dies
.(@index) - (920px minus @index)

Aber ich habe keine Ahnung, ob dies möglich ist.

InformationsquelleAutor R Reveley | 2012-06-05

8

Ich glaube nicht, du bist weit Weg. Was ich getan habe ist, erstellen Sie eine zweite variable in die mixin, genannt @index2. Alle diese tut, ist zu finden, die '920px minus @index" - Wert ein, den Sie suchen:
```
@index2 = (920-@index);
```
diese wird dann angehängt, um den Namen der Klasse:
```
(~".gs@{index}-@{index2}") {
```
Dies ist die komplette Schleife:
```
.loopingClass (@index) when (@index > 160) {
    @index2 = (920-@index);
    //create the actual css selector, example will result in
    //.myclass_30, .myclass_28, .... , .myclass_1
    (~".gs@{index}-@{index2}") {
    //your resulting css
        width: (@index/20+1)*@col;
    }
    //next iteration
    .loopingClass(@index - 60);
}
//"call" the loopingClass the first time with highest value
.loopingClass (@iterations);
```
Damit bekommen nur die, die Sie suchen (gs220-700 gs700-220), ändern Sie einfach @iterations gleich 700.

Erwähnenswert, dass derzeit, so erstellen Sie die Klassen in der umgekehrten Reihenfolge, wie Sie angegeben haben, Sie in Frage stellen.

InformationsquelleAutor cchana

Diese ganze Frage war sehr hilfreich für mich. Ich wollte nur die Lösung posten, um mein problem als die Art und Weise zu tun, es hat sich geändert, seit LESS v 1.4. WENIGER Changelog

Anstatt mit den ~ Zeichen, Sie schreiben Sie einfach den Teil des namens, den Sie möchten zusammen mit der normalen @ - und Variablen-Namen mit {} umgibt. Also: #class@{variable}.

Zum Beispiel, meine Lösung mit der gleichen Art von loop wurde, wie:

/*Total number of passport inserts*/
@numInserts: 5;
/*Total width of the passport foldouts*/
@passportWidth: 300px;
/*Change in passport insert width per iteration*/
@passportWidthDiff: (@passportWidth / @numInserts);
/*"Array" of colors to select from to apply to the id*/
@passportColors: 
blue orange green red yellow 
purple white teal violet indigo;

/*The faux loop the doesn't end up in the final css
@index is the counter
@numInserts is the total number of loops*/
.loopingClass (@index) when (@index <= @numInserts){
   /*This is the created ID with the index appended to it
   You can also do this with classes such as if 
   we had had ".insert@{index}"*/
   #insert@{index}{
      /*Here are our properties that get adjusted with the index*/
      width: (@passportWidth - (@passportWidthDiff * (@numInserts - @index)));
      height: 50px;
      background-color: extract(@passportColors, @index);
      z-index: (@numInserts - @index);
   }
   /*Here we increment our loop*/
   .loopingClass(@index + 1);
}
/*This calls the loop and starts it, I started from 1
since I didn't want to lead a className starting from 0,
But there is no real reason not to.  Just remember to
Change your conditional from "<=" to "<"*/
.loopingClass(1);

Und produziert die folgenden:

#insert1 {
  width: 60px;
  height: 50px;
  background-color: #0000ff;
  z-index: 4;
}
#insert2 {
  width: 120px;
  height: 50px;
  background-color: #ffa500;
  z-index: 3;
}
#insert3 {
  width: 180px;
  height: 50px;
  background-color: #008000;
  z-index: 2;
}
...

Ich bin neugierig, wie das Aussehen würde, wenn wir versuchen, ziehen Sie die sich wiederholenden Eigenschaften in einem einzigen block. In diesem Fall ist die Ausgabe, von der ich spreche, würde so Aussehen: #einsatz1, #insert2, #insert3 { height: 50px; }

InformationsquelleAutor zero298

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.