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

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+也是如此，但如果已经升级到这个版本，为什么要做更多的代码呢）：

较少

@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*/
}