1

私は.lessファイルを持っています:

@flag1: fr;
@flag2: en;
@flag3: ru;

@iterations: 3;

.loopingClass (@index, @difference: 0) when (@index < @iterations) {
    @idx: (@index + 1);
    @diff: (@difference - 32);

    (~".my-class-@{index}") {
        my-idx: @idx;
        my-diff: @diff;
        my-index: @index;
        my-difference: @difference;
    }

    .loopingClass(@idx, @diff);
}

.loopingClass (@iterations) {}
.loopingClass (0);

ループの最後の値である@idx.cssが生成されるのはなぜですか?@diff

.my-class-0 {
  my-idx: 3;
  my-diff: -96;
  my-index: 0;
  my-difference: 0;
}
.my-class-1 {
  my-idx: 3;
  my-diff: -96;
  my-index: 1;
  my-difference: -32;
}
.my-class-2 {
  my-idx: 3;
  my-diff: -96;
  my-index: 2;
  my-difference: -64;
}

私はあまりよくありませんが、最善を尽くし、このループを機能させるために多くの方法を試しました。1、2、3、および -32、-64、-96 である必要が@idxあります。@diff

4

1 に答える 1

1

私はそれを機能させるためにいくつかの非常識な方法を試していましたが、ループが終了した後にすべてを解析することはおそらく少ないことに気づきました（またはそのようなものです）。だから私は、おそらくループの外に設定しよう@idxとするべきだと思いました。@diff今、私のコードはそのようになり、期待どおりに動作します:

.classOutput(@index, @difference){
    @idx: (@index + 1);
    @diff: (@difference - 32);

    (~".my-class-@{index}") {
        my-idx: @idx;
        my-diff: @diff;
        my-index: @index;
        my-difference: @difference;
    }
}
.loopingClass (@index, @difference: 0) when (@index < @iterations) {
    .classOutput(@index, @difference);
    .loopingClass((@index + 1), (@difference - 32));
}

そのため、新しいバージョンの LESS(~".my-class-@{index}")ではエラーがスローされます。これらの変更は役立つはずですが、テストはしていません:.my-class-@{index}

于 2013-03-21T14:45:11.720 に答える