使用 mixin 参数在 LESS 中创建类名答案

【问题标题】：Use mixin argument to create class name in LESS使用 mixin 参数在 LESS 中创建类名
【发布时间】：2017-01-19 12:37:41
【问题描述】：

我正在尝试在 LESS 中为我将用于网站的不同颜色创建一个简单的 mixin。

我想要的是使用 mixin argument 作为类名的一部分。

@green: #5FBEAA; // my color variable

.text-color(@color) {
    .text-{@color} {
        color: @color;
    }
}

.text-color(@green);

我得到的输出是：

.text-#5FBEAA {
  color:#5FBEAA
}

我想要的是：

.text-green {
  color:#5FBEAA
}

【问题讨论】：

【解决方案1】：

我想我有使用 Variable Names 的解决方案。

少

@green: #5FBEAA;

.text-color(@colorname) {
  @color: ~"@{colorname}";
  .text-@{color}{
    color: @@color;
  }
}

.text-color(green);

输出

.text-green {
  color: #5FBEAA;
}

【讨论】：

不错的方法。你能解释一下，为什么我们需要用~@{colorname}; 为@color 变量赋值，即使我这样写@colorname;，它也有效。这背后有什么正当理由吗？
可以在通话中将~"green" 替换为green 并且看起来更好，但我在测试后忘记将其删除。我使用~@{colorname} 将green 作为字符串。我编辑了答案

【解决方案2】：

我认为这是不可能的。最接近的解决方案是使用附加变量。

@green: #5FBEAA;
 .text-color(@name,@color) {
     .text-@{name} {
         color: @color;
     }
 }
 .text-color(green,@green);

这将编译为

.text-green {
  color: #5FBEAA;
}

【讨论】：