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);

它怎么会在哪里生成我 .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。

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 回答