Multiple selectors in loop in LESS

css, less

Solution

Using `:extend()` in LESS 1.4+

This seems to accomplish it more elegantly. You first define the initial values you will want extended in a hard coded `.grid_1` class (at present, LESS will not extend dynamically generated classes), then add an extender mixin in your loop to extend to that class. Like so:

.grid_1 { //this acts as the "launch point" for extending them all
    display: inline;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}

.columnBuilder (@index) when (@index =< @columnCount) {
  //we are going to use this class twice, so just calculate it once
  @gridClass: ~'.grid_@{index}';
  //this is your original code except the variable now used for the grid class
  .container_@{columnCount} @{gridClass} {
    width: unit(((@baseWidth / @columnCount) * @index)-10, px);
  }
  //this is your extender feature, which does not do so for the initial .grid_1
  //which was set above as our launch point.
  @{gridClass} {
    .extender() when (@index > 1) {
      &:extend(.grid_1 all);
    }
    .extender() when (@index = 1) {}
    .extender();
  }
  //iterate the loop just as you were doing
  .columnBuilder(@index + 1);
}
//call the loop starting at 1
.columnBuilder(1);

Output is your expected:

.grid_1,
.grid_2,
....,
.grid_N {
  display: inline;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

Problem

I am using the following code to generate a column layout using LESS CSS: ``` .columnBuilder (@index) when (@index =< @columnCount) { .container_@{columnCount} .grid_@{index} { width: unit(((@baseWidth / @columnCount) * @index)-10, px); } .columnBuilder(@index + 1); } ``` Which gives me an output: ``` .container_24 .grid_1 { width: 69px; } .container_24 .grid_2 { width: 148px; } .container_24 .grid_3 { width: 227px; } etc... ``` How would i now create a new less function that would give an output of: ``` .grid_1, .grid_2, ...., .grid_N { display: inline; float: left; margin-left: 5px; margin-right: 5px; } ``` Where `N` is defined as `@columnCount: 24;`, though the column count is not set, it can be changed to any number. I am aware i could create a body for each `grid_X` would like to avoid it to keep clutter down.

Original source