css - 更少的带有颜色名称的 css 变量

Question

我正在尝试创建一些动态类宽度更少的 css。

这个想法是在html这个类中使用的:

.color-white{
   color: white !important;
}

我在 Less 中创建了这个 sintaxis:

.change-color(@which; @color){
  .color-@{which}{
    color:@color !important;
  }
  .background-@{which}{
    background-color:@color !important;
  }
}

所以，有了这个我想接受我的想法:D

.change-color(@which: white; @color: white);

但是，这就是问题所在，我有这个:

.color-#ffffff{
  color:#fff!important
}
.background-#ffffff{
  background-color:#fff!important
}

如何将“white”用作字符串而不是十六进制颜色。

谢谢。

Answer 1

改为这样调用:

.change-color(@which: ~'white'; @color: ~'white');

尽管我认为直接创建一个名为 .color-red 的类比无缘无故地让事情变得更难读会更好。