将参数附加到 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);
}

这两个return:

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

将参数附加到 LESS mixin 中的变量

Append an argument to a variable in a LESS mixin

css

variables

preprocessor

less