Question

我有.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);

为什么它会生成我.css @idx和@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;
}

我不是很擅长，但是我尽了最大的努力，尝试了很多方法让这个循环起作用。我需要@idx和@diff为1,2,3和-32，-64，-96。

Answer 1

我正在尝试一些疯狂的方法来使它工作并意识到，可能更少的是在循环结束后解析所有内容（或者类似于smth。）。所以我想，也许我应该尝试在循环之外设置@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}

较少的循环变量始终设置为最后的值

1 个答案: