使用针对颜色类的样式重构 LESS 代码答案

【问题标题】：Refactor LESS code with styles targeting color classes使用针对颜色类的样式重构 LESS 代码
【发布时间】：2014-09-08 12:48:46
【问题描述】：

我声明了一堆颜色变量：

@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;}
  }
}

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

【问题讨论】：

见stackoverflow.com/questions/21440789。虽然从技术上讲，使用颜色数组而不是单个变量和它们的名称数组更优雅（例如，参见stackoverflow.com/questions/23658087）。
@seven-phases-max：是的，第二个选项听起来好多了。 This 是我昨天发布的另一个相关答案。

标签： css html refactoring less stylesheet

【解决方案1】：

基于来自seven-phases-max 的 cmets，这里是一个示例实现。

@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();    
}

【讨论】：