css - Multiple selectors in loop in LESS -

i using following code generate 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 output:

.container_24 .grid_1 {   width: 69px; } .container_24 .grid_2 {   width: 148px; } .container_24 .grid_3 {   width: 227px; }  etc... 

how create new less function give output of:

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

where n defined @columncount: 24;, though column count not set, can changed number. aware create body each grid_x avoid keep clutter down.

using :extend() in less 1.4+

this seems accomplish more elegantly. first define initial values want extended in hard coded .grid_1 class (at present, less not extend dynamically generated classes), add extender mixin in loop extend class. so:

.grid_1 { //this acts "launch point" extending them     display: inline;     float: left;     margin-left: 5px;     margin-right: 5px; }  .columnbuilder (@index) when (@index =< @columncount) {   //we going use class twice, calculate once   @gridclass: ~'.grid_@{index}';   //this original code except variable used grid class   .container_@{columncount} @{gridclass} {     width: unit(((@basewidth / @columncount) * @index)-10, px);   }   //this extender feature, not initial .grid_1   //which set above our launch point.   @{gridclass} {     .extender() when (@index > 1) {       &:extend(.grid_1 all);     }     .extender() when (@index = 1) {}     .extender();   }   //iterate loop doing   .columnbuilder(@index + 1); } //call loop starting @ 1 .columnbuilder(1); 

output expected:

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