在LESS mixin中将变量附加到变量

Question

这是我的代码：

@color-level-1: #99FFDD;
@color-level-2: #4484F6;
@color-level-3: #E91E63;
@color-level-4: #E99D1E;
@color-level-5: #D51EE9;


.some-color(@i) {
  + .some-class-name {
    background-color: @color-level-@i;
  }
}

.another-class-name {
  .some-color(3);
}

试图完成的工作是在使用mixin时获得以下输出：

.another-class-name + .some-class-name {
  background-color: #E91E63;
}

不幸的是，它不起作用。 我得到的输出是：

.another-class-name + .some-class-name {
  background-color:  3;
}

我已经尝试过转义，但这也无济于事。 有人知道如何使其工作吗？

Answer 1

有两种方法可以做到这一点。 第一个是：

 @color-level-1: #99FFDD; @color-level-2: #4484F6; @color-level-3: #E91E63; @color-level-4: #E99D1E; @color-level-5: #D51EE9; .some-color(@i) { + .some-class-name { background-color: ~"@{color-level-@{i}}"; } } .another-class-name { .some-color(3); } 

第二个是：

 @color-level-1: #99FFDD; @color-level-2: #4484F6; @color-level-3: #E91E63; @color-level-4: #E99D1E; @color-level-5: #D51EE9; .some-color(@i) { + .some-class-name { @color-name: "color-level-@{i}"; background-color: @@color-name; } } .another-class-name { .some-color(3); } 

这些都返回：

 .another-class-name + .some-class-name { background-color: #E91E63; }