在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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第二个是：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这两个都回归：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;