生成CSS组通过少 [英] Generation CSS group via less

问题描述

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

Is it able to create such a mixin which generate CSS group? I will explain what I mean below:

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

推荐答案

（使用保护的mixin创建）与一个基类，如下所示。基类具有公共属性，并且可以根据需要从循环中扩展多次。

You can use a loop (created using a guarded mixin) with one base class like below. The base class has the common properties and can be extended as many times from within the loop as required.

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

The base class and extend is required to create the CSS in the form .x1, .x2, .x3{} format. If it can be as .x1{} .x2{}, then the base class and extend is not really 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);

已编译的CSS ：

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

注意：我们要调用相同的mixin来创建另一个循环（如 .fancymixin（10，y））为创建一组单独的属性。 y * 组，因为我们总是扩展 .x1 类属性。

Note: The above approach would not work if we want to call the same mixin to create another loop (like .fancymixin(10, y)) to create a separate set of properties for the .y* group because we are always extending the .x1 class properties.

这篇关于生成CSS组通过少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！