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

【问题标题】：Append an argument to a variable in a LESS mixin将参数附加到 LESS mixin 中的变量
【发布时间】：2018-01-11 17:35:44
【问题描述】：

这是我的代码：

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

我尝试过转义，但也无济于事。有人知道如何让它工作吗？

【问题讨论】：

我认为你可以把颜色放在一个列表中，然后在代码中使用它lesscss.org/functions/#list-functions
Defining Variable Variables using LESS CSS的可能重复
@chazsolo 谢谢伙计，我已经尝试搜索近一个小时，但我没有找到这个线程。它有效！
解决方案是@color-name: "color-level-@{i}"; background-color: @@color-name;
@3rdthemagical 解决方案也可以。

标签： css variables less preprocessor

【解决方案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;
}

【讨论】：