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+ 也适用，但是如果升级到该版本，为什么要编写比必要更多的代码）：

较少的

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