Dynamic class names in LESS

class, dynamic, less, mixins, variables

Solution

I don't think you're far off. What I've done is create a second variable inside the mixin, called `@index2`. All this does is find the '920px minus @index' value that you're looking for:

@index2 = (920-@index);

this is then appended to the class name:

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

This is the complete loop:

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

In order to get just the set you are looking for (gs220-700 to gs700-220), just change `@iterations` to equal 700.

Worth noting that currently, this will create the classes in the reverse order of how you specified them in the question.

Problem

I have the following bit of LESS code working ``` @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); ``` It outputs our grid system as so: ``` .gs940 { width: 100%; } .gs880 { width: 93.75%; } .gs820 { width: 87.5%; } .gs760 { width: 81.25%; } .gs700 { width: 75%; } ``` etc etc etc Now what I want to do is some math to the class names to produce the following classes ``` .gs220-700 .gs280-640 .gs340-580 .gs400-520 .gs460-460 .gs520-400 .gs580-340 .gs640-280 .gs700-220 ``` etc etc etc basically this would be .(@index) - (920px minus @index) But I have no idea if this is possible.

Original source