css - 通过 less 生成 CSS 组

Question

是否能够创建这样一个生成 CSS 组的 mixin？我将在下面解释我的意思：

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

.fancymixin(10, x);

它会产生类似的东西：

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

Answer 1

您可以使用带有一个基类的循环（使用受保护的 mixin 创建），如下所示。基类具有通用属性，可以根据需要从循环内多次扩展。

.x1, .x2, .x3{}创建表单格式的 CSS 需要基类和扩展。如果它可以 as .x1{} .x2{}，那么基类和扩展并不是真正需要的。

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

编译的CSS：

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

注意：.fancymixin(10, y)如果我们想调用同一个 mixin 来创建另一个循环（如）来为组创建一组单独的属性，上述方法将不起作用，.y*因为我们总是在扩展.x1类属性。