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

Posted 2023-03-15

【中文标题】使用针对颜色类的样式重构 LESS 代码

【英文标题】：Refactor LESS code with styles targeting color classes

【发布时间】：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;
    &.orangebackground-color: @orange;
    &.bluebackground-color: @blue;
    &.sapphirebackground-color: @sapphire;
    &.greenbackground-color: @green;
  

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

【问题讨论】：

见***.com/questions/21440789。虽然从技术上讲，使用颜色数组而不是单个变量和它们的名称数组更优雅（例如，参见***.com/questions/23658087）。

@seven-phases-max：是的，第二个选项听起来好多了。 This 是我昨天发布的另一个相关答案。

【参考方案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();