Question

我正在尝试生成这个css：

img.consults {
    /*some css*/
}
img.coworkers {
    /*some css*/
}
img.dashboard {
    /*some css*/
}

使用这些较少的css代码。

@type1: "dashboard";
@type2: "consults";
@type3: "coworkers";

.loopingClass (@index) when (@index > 0) {
    @ctype: "type@{index}";
    @type: e(@@ctype);
    img.@{type} {
        /*some css*/
    }

    .loopingClass (@index - 1);
};

.loopingClass(3);

而不是所需的CSS代码。我得到三次次

img.dashboard {
   /*some css*/
}

它应该开始生成img.consults，因为它是倒计时，但我最终有三次img.dashboard，这是第一次，所以应该最后生成。我无法理解它！我在这里做错了什么？

Answer 1

修复版本1.3.2或1.3.3

问题中的原始代码适用于LESS 1.4+，但在之前的两个版本中存在问题。这些问题可以通过在另一个mixin调用中嵌套使用已定义的变量变量来解决。所以这是有效的（对于1.4+也是如此，但是如果有一个升级到那个代码，为什么要做的代码超过必要的代码）：

<强> LESS

@type1: "dashboard";
@type2: "consults";
@type3: "coworkers";

.loopingClass(@index) when (@index > 0) {
    @ctype: "type@{index}";
  .setClass(@className) {
     img.@{className} {
         /*some css*/ 
     }
   }
  .setClass(e(@@ctype));
  .loopingClass(@index - 1);
};

.loopingClass(3);

CSS输出

img.coworkers {
  /*some css*/
}
img.consults {
  /*some css*/
}
img.dashboard {
  /*some css*/
}

较少的CSS循环生成相同的类

1 个答案:

修复版本1.3.2或1.3.3