css - 使用针对颜色类的样式重构 LESS 代码

Question

我声明了一堆颜色变量:

@green: #00a75c;
@darkgreen: #118335;
@blue: #0099ff;
@orange: #f7931e;
@sapphire: #303a96;
@gray: #4d4d4d;

我使用的 CMS 将每种颜色作为一个选项。因此，生成的 html 将具有这些颜色名称之一作为兄弟。生成这样的东西:

<div class="thing orange">
</div>

这是目前我在 less 代码中定位元素的方式:

.thing{
  &.orange{
    color: @orange;
    border: @orange solid 1px;
  }
  &.blue{
    color: @blue;
    border: @blue solid 1px;
  }
  &.sapphire{
    color: @sapphire;
    border: @sapphire solid 1px;
  }
  &.green{
    color: @green;
    border: @green solid 1px;
  }

  &:hover{
    text-decoration: none;
    color: white;
    &.orange{background-color: @orange;}
    &.blue{background-color: @blue;}
    &.sapphire{background-color: @sapphire;}
    &.green{background-color: @green;}
  }
}

重构它的最佳方法是什么？我需要制作小的 mixins，一个巨大的 mixin 吗？我能以某种方式循环颜色吗？

Answer 1

基于 seven-phases-max 的评论，这里是一个示例实现。

@colours:
    'green' #00a75c,
    'darkgreen' #118335,
    'blue' #0099ff,
    'orange' #f7931e,
    'sapphire' #303a96,
    'gray' #4d4d4d;

.generate-colour-classes(@index: length(@colours)) when (@index >0) {
    @colour: extract(@colours, @index);
    @property-name: e(extract(@colour, 1));
    @property-value: extract(@colour, 2);
    .generate-colour-class(@property-name; @property-value);
    .generate-colour-classes(@index - 1);
}

.generate-colour-class(@name; @value){
    &.@{name} {
        color: @value;
        border: @value solid 1px;
    }
}

.thing {
    .generate-colour-classes();    
}