css - 防止变量颜色名称在较少的类名称中转换为十六进制

Question

我想使用一个包含颜色名称（红色、蓝色、绿色等）的变量并定义一些类样式规则。例如：

.mixins-common-components(@colorName, @backgroundColor, @textColor){
  .btn{
     &.@{colorName}{
         color: @textColor;
         background-color: @backgroundColor;
         border-color: "";
     }
  }
}

.mixins-common-components(blue, #3781f7, #4b8df8);

这将返回给我这样的东西：

.btn.#0000ff {
  color: #4b8df8;
  background-color: #3781f7;
  border-color: "";
}

好吧，.btn 的显示方式不行。我想这样显示它：

 .btn.blue{ ... }

我注意到 less 会自动将颜色名称转换为 HEX 值。我也尝试了引号，但这似乎也不是一个好的解决方案。有什么解决方案可以优雅地解决这个问题吗？

谢谢。