使用mixin參數在LESS中創建類名

Question

我正在嘗試在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
}

Answer 1

我想我有使用變量名稱的解決方案。

減

@green: #5FBEAA;

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

.text-color(green);

產量

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

Answer 2

我認為不可能。 最接近的解決方案是使用額外的變量。

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

這將編譯為

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