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

您可以使用一个循环(使用 protected 混合创建)和一个基类，如下所示。基类具有共同的属性，并且可以根据需要从循环内扩展任意多次。

创建 .x1, .x2, .x3{} 格式的 CSS 需要基类和扩展。如果它可以是 .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;
}

注意:如果我们想调用同一个 mixin 来创建另一个循环(比如 .fancymixin(10, y))来创建一个.y* 组的一组单独的属性，因为我们总是扩展 .x1 类属性。