Css 使用mixin参数以较少的时间创建类名

我正在尝试创建一个简单的混音在不同的颜色，我将用于一个网站少

我想要的是使用

mixin

参数

作为类名的一部分

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

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

.text-color(@green);

我得到的结果是：

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

我想要的是：

.text-green {
  color:#5FBEAA
}

---

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

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

这将编译为

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

---

我想我已经有了解决方案

更少

@green: #5FBEAA;

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

.text-color(green);

输出

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

---

你是如何在SASS或手写笔中实现这一点的？@blonfu我在SASS/手写笔中试过。那样不行。。我的错误。我还用过别的东西。这里搞错了。好吧，我觉得奇怪的是，你可以用这种方式访问变量名。很好的方法。你能解释一下，为什么我们需要用

~{colorname}为
@color
变量赋值吗即使我这样写
@colorname，itl工作。有什么正当的理由吗？可以在通话中用
绿色
替换
~“绿色”
，看起来好多了，我做了测试后忘了删除它。我使用
~@{colorname}
将
绿色
作为字符串。我编辑了答案