css - 少/CSS : Avoid many LOC?

Question

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

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

如果可以的话，我想知道

1. 避免 Mixedin 的过度重复？
2. 避免在每个 mixedin-usage 中对类名和 mixedin 参数使用双重 c&p？

谢谢!

Answer 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() function 是类名所必需的，因为如果您为它们使用原始值，LESS 会将名称转换为#-colors，从而破坏输出语法。

正如评论中所建议的，您真的应该重新考虑您的类名，只要有可能，就按用途而不是内容来命名它们。