Add array variable support and loop function

[thecreation]

The foundataion grid function that write in sass

// Create class names from column count integers
@function number-as-word($number){
  $w: "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven",
"twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen",
"twenty", "twenty-one", "twenty-two", "twenty-three", "twenty-four", "twenty-five", "twenty-six", "twenty-seven",
"twenty-eight", "twenty-nine", "thirty", "thirty-one", "thirty-two", "thirty-three",
"thirty-four", "thirty-five", "thirty-six";
  @return nth($w, $number);
}

.row {
  @for $i from 1 through $cols{
    @if $i == 1 {
      .one.column {
        width: columns($i);
      }
    }
    .#{number-as-word($i)}.columns {
      width: columns($i);
    }
  }
}

What i am thinking can you introduce array variable and for loop function so we can do the same things above?
The syntax may like:

@word-numbers: ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"];

.row {
  @word-numbers.forEach(@word, @index) {
     .columns_rule() when (@index = 1) {
         .one.column {
            width: columns($index);
          }
     }
     .columns_rule() when (@index != 1) {
         .@{word}.columns {
            width: columns($index);
          }
     }
     .columns_rule(@index);
  }
}

This function is very helpful. If you can add it that will be awesome. Thanks.

[lukeapage]

You can do all of this in less..

1. Space seperate your values, use pick to select an index
2. Loop using recursion with mixins
3. If using guards

[thecreation]

@lukeapage Can you give a simple example. I don't understand well. Thanks!

[jonschlinkert]

this would make a good stackoverflow question.. ;-)

[Soviut]

Indeed, Let Me Google That For You(TM) ;)

http://stackoverflow.com/questions/17695787/build-a-selector-within-a-less-loop

[thecreation]

Good.

@grid_columns: 6;
@word_numbers:  one two three four five six seven eight nine ten eleven twelve;

.row {
    .column_loop (@index) when (@index = 1){
        .one.column {
            .column_width(@index);
        }
    }
    .column_loop (@index) when(@index < @grid_columns + 1){
        @word: extract(@word_numbers, @index);
        .@{word}.columns {
            .column_width(@index);
        }
         .column_loop(@index+1);
    }

    .column_loop(1);

    .column_width(@index){
        width: percentage(@index/@grid_columns);
    }
}

And it result

.row .one.column {
  width: 16.666666666666664%;
}
.row .one.columns {
  width: 16.666666666666664%;
}
.row .two.columns {
  width: 33.33333333333333%;
}
.row .three.columns {
  width: 50%;
}
.row .four.columns {
  width: 66.66666666666666%;
}
.row .five.columns {
  width: 83.33333333333334%;
}
.row .six.columns {
  width: 100%;
}

I think you should update the usage of extract function to the documentation.

Thanks for all the helps.

[Soviut]

I've created an issue in the less-docs repository for updating the extract() documentation. You may now close this issue.

[thecreation]

@Soviut thanks. I would like close this issue.

But i am still thinking it's necessary adding a foreach loop.

For example.

At the moment i have the code below:

@devices: tablet mobile;
@breakpoints: 768px 480px;
@count: 2;

.grid-generator (@devices, @breakpoints, @count) {
    .grid-generator (@devices, @breakpoints, @count, 1);
}

.grid-generator (@devices, @breakpoints, @count, @index) when (@index < @count + 1){
    @device: extract(@devices, @index);
    @breakpoint: extract(@breakpoints, @index);

    .grid-device-generator (@device, @breakpoint);

    .grid-generator (@devices, @breakpoints, @count, @index + 1);
}

You can see the full code here.
But if you give ability get the ability of foreach loop as below. The code will be shorter and much more easy to read.
Especially i dont need use a extra @count variable any more.

@devices: tablet mobile;
@breakpoints: 768px 480px;

.grid-generator (@devices, @breakpoints, @count) {
    @devices.forEach(@device, @index) {
        @breakpoint: extract(@breakpoints, @index);
        .grid-device-generator (@device, @breakpoint);
     }
}

If this is not easy to achieve, i hope you can give a size function to get the size of a array variable:

@devices: tablet mobile;
@breakpoints: 768px 480px;

.grid-generator (@devices, @breakpoints) {
    .grid-generator (@devices, @breakpoints, 1);
}

.grid-generator (@devices, @breakpoints, @index) when (@index < size(@devices) + 1) {
    @device: extract(@devices, @index);
    @breakpoint: extract(@breakpoints, @index);

    .grid-device-generator (@device, @breakpoint);

    .grid-generator (@devices, @breakpoints, @index + 1);
}

Thanks again. For your open mind and your hard work.

[lukeapage]

see #1542