CSS group generation through less

Question

Is it possible to create a mixin that generates a CSS group? I will explain what I mean below:

.fancymixin(@max, @prefix) { //content what I don't know how to code } .fancymixin(10, x); 

It generates something like:

 .x10, .x9, .x8, .x7, .x6, .x5, .x4, .x3, .x2, .x1 { //some fancy style I want to set } 

Answer 1

You can use a loop (created using a secure mixin) with one base class, as shown below. The base class has common properties and can be increased as many times from the loop as needed.

The base class and extension are required to create CSS in the format .x1, .x2, .x3{} . If it can be as .x1{} .x2{} , then the base class and extension are not required.

 .x1{ //base class with all common props color: blue; } .fancymixin(@max, @prefix) when (@max > 1) { // loop from 10 to 1 .fancymixin(@max - 1, @prefix); // call the next iteration of the loop .@ {prefix}@{max}:extend(.x1){}; // extend the properties of the x1 base class } .fancymixin(10, x); 

Compiled CSS:

 .x1, .x2, .x3, .x4, .x5, .x6, .x7, .x8, .x9, .x10 { color: blue; } 

Note. . This approach will not work if we want to call the same mixin to create another loop (e.g. .fancymixin(10, y) ) to create a separate set of properties for the .y* group, because we always extend the properties of the .x1 class.