LESS/CSS：避免很多 LOC？答案

【问题标题】：LESS/CSS: Avoid many LOC?LESS/CSS：避免很多 LOC？
【发布时间】：2015-08-19 19:16:00
【问题描述】：

我想知道我是否可以改进我的 LESS-Snippet。我有很多带有颜色名称/我自己的颜色标题和相关颜色的变量，用于前景色和背景色。我根据我的颜色定义类 namend。

@logocolorgreen: #40FF01;      @logocolorgreenname: green;             @logocolorgreenitem: #404040;
@logocolormidblue: #01C0FF;    @logocolormidbluename: midblue;         @logocolormidblueitem: #404040;
@logocolorpurple: #C00031;     @logocolorpurplename: purple;           @logocolorpurpleitem: white;
@logocoloryellow: #FFC000;     @logocoloryellowname: yellow;           @logocoloryellowitem: #404040;
    // ... more Colors


div { 
    .mixedin(@colorname) {
        @bgvarname: "logocolor@{colorname}";
        background-color: @@bgvarname;
        @fgvarname: "logocolor@{colorname}item";
        color: @@fgvarname;
    }

    &.@{logocolorgreenname} {
        .mixedin(@logocolorgreenname); 
    }
    &.@{logocolormidbluename} {
        .mixedin(@logocolormidbluename); 
    }
    &.@{logocolorpurplename} {
        .mixedin(@logocolorpurplename); 
    }
    &.@{logocoloryellowname} {
        .mixedin(@logocoloryellowname); 
    }
    // ... more Colors
}

编译成

div.green {
  background-color: #40ff01;
  color: #404040;
}
div.midblue {
  background-color: #01c0ff;
  color: #404040;
}
div.purple {
  background-color: #c00031;
  color: white;
}
div.yellow {
  background-color: #ffc000;
  color: #404040;
}

我想知道，如果可以的话

避免 Mixedin 的过度重复？
避免在每个混合使用中为类名和混合参数使用双 c&p？

谢谢！

【问题讨论】：

更适合代码审查？
@vidstige 也许吧，但它可能是一个语言知识问题并被抛回这里。
那么当您将#40FF01 更改为#ff0000 但名称仍为logocolorgreen 时会发生什么？我认为避免名称中的颜色是明智的，除非您 100% 确定颜色不会改变（永远）。
@DarkFalcon 你是对的！你有更好的主意吗？我相对确定，因为这些类似于“公司颜色”，并且此代码用于 wordpress 主题。如果重要的事情发生了变化，就会有一个更新的主题。
我建议你的类以页面元素命名（例如header、footer、menu）。很难说你是否可以用颜色变量来做到这一点。如果没有，他们会很好。然后，您只需在每个需要它的规则中手动使用 mixin。

标签： css less lines-of-code

【解决方案1】：

您可以使用lists 和loops：

//define the logo colours as a triplet of class name, background and foreground colors
@logocolorgreen: "green", #40FF01, #404040;
@logocolormidblue: "midblue", #01C0FF, #404040;
@logocolorpurple: "purple", #C00031, white;
@logocoloryellow: "yellow", #FFC000, #404040;

//pack the triplets into a list of all triplets to be used
@colors: @logocolorgreen, @logocolormidblue, @logocolorpurple, @logocoloryellow;

//this is how loops are made in less: recursion with default parameters and guards
//the  +1 on the length is necessary because lists in LESS are 1-indexed
.logocolors(@i: 1) when (@i < length(@colors) + 1) {
  .logocolors(@i + 1);

  @current: extract(@colors, @i); //current holds the triplet
  //explode the triplet into variables
  @current-name: e(extract(@current, 1)); //the e function converts a string to a selector
  @current-bg: extract(@current, 2);
  @current-fg: extract(@current, 3);

  //rule body
  &.@{current-name} {
    background-color: @current-bg;
    color: @current-fg;
  }
}
div {
  .logocolors();
}

此示例产生以下 CSS 输出：

div.yellow {
  background-color: #ffc000;
  color: #404040;
}
div.purple {
  background-color: #c00031;
  color: #ffffff;
}
div.midblue {
  background-color: #01c0ff;
  color: #404040;
}
div.green {
  background-color: #40ff01;
  color: #404040;
}

e() 函数对于类名是必需的，因为如果您对它们使用原始值，LESS 会将名称转换为 #-colors，从而破坏输出语法。

正如 cmets 中所建议的那样，您应该尽可能地重新考虑您的类名，通过使用而不是内容来命名它们。

【讨论】：