nombres de clases dinámicas en menos

Question

Tengo el siguiente fragmento de código MENOS trabajo

  @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); 

da salida a nuestro sistema de red como tan:

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

etc, etc, etc

Ahora lo que quiero hacer es un poco de matemáticas con los nombres de clase para producir las siguientes clases

  .gs220-700 
      .gs280-640 
      .gs340-580 
      .gs400-520 
      .gs460-460 
      .gs520-400 
      .gs580-340 
      .gs640-280 
      .gs700-220 

etc, etc, etc

básicamente esto sería (@ índice) -. (920px menos @index)

Pero no tengo ni idea de si esto es posible.

Answer 1

No creo que estés lejos. Lo que he hecho es crear una segunda variable dentro de la mixin, llamada @index2. Todo esto hace es encontrar el valor '920px menos @index' que está buscando:

@index2 = (920-@index); 

esto se añade luego al nombre de clase:

(~".gs@{index}-@{index2}") { 

Este es el bucle completo:

.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); 

con el fin de obtener sólo el conjunto que busca (gs220-700 a gs700-220), acaba de cambiar @iterations para igualar 700.

Vale la pena señalar que, en este momento, creará las clases en el orden inverso de cómo las especificó en la pregunta.

Answer 2

Toda esta pregunta fue muy útil para mí. Solo quería publicar la solución a mi problema ya que la forma de hacerlo ha cambiado desde LESS v 1.4. LESS Changelog

En lugar de utilizar el signo ~, que acaba de escribir la parte del nombre que desea junto con el nombre normales @ y variables con {} que lo rodea. Entonces: #class@{variable}.

Por ejemplo, mi solución usando el mismo tipo de bucle se hizo tales:

/*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); 

y produce lo siguiente:

#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; 
} 
...