3

私はこの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 コードの代わりに。私は3回取得します

img.dashboard {
   /*some css*/
}

カウント ダウンなので の生成を開始する必要がありますが、最初のimg.consults3 回で終わるため、最後に生成する必要があります。img.dashboard頭が回らない！ここで何が間違っていますか？

4

1 に答える 1

4

バージョン 1.3.2 または 1.3.3 で修正するには

問題の元のコードは LESS 1.4+ で動作しますが、それ以前の 2 つのバージョンには問題があります。これらの問題は、別の mixin 呼び出しで定義された変数 variable の使用をネストすることで回避できます。したがって、これは機能します（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*/
}
于 2013-07-29T15:46:20.990 に答える