通过less生成CSS组

Question

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

.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
}

- kspacja

---

是的，您可以使用循环。但是您是否特别寻找.x1，.x2 {}结构，还是.x1{} .x2{}结构也可以？ - Harry

我指的是第一个版本，因为我想生成更少的代码行。 - kspacja

是的，当你提到“group”时我有点明白了，但只是想确认一下。顺便说一句，希望你也注意到了我的评论。这种方法有一个小问题。 - Harry

Answer 1

您可以使用一个带有保护的mixin创建循环，像下面这样只使用一个基类。基类具有通用属性，并且可以在循环内部按需扩展多次。

需要创建形如.x1, .x2, .x3{}格式的CSS，则需要基类和extend。如果可以是.x1{} .x2{}形式，则不需要基类和extend。

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

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

- Harry

---

但是这种方法存在一个问题。x1 基础是一个常数。因此，如果您想要 .fancymixin(10,y) 并且需要为 y* {} 提供单独的属性集，则此答案中的代码将无法工作。我正在努力改进它。 - Harry

似乎我在上面评论中提到的目前不可能实现。这个GitHub线程有一个类似的用例。 - Harry