css - 更少的 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+，但如果已经升级到 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*/
}