LESS/CSS: Avoid many LOC?

Question

I want to know if I could improve my LESS-Snippet. I have a lot of variables with colornames/my own color captions and associated colors for fore- and background. And I define classes namend after my colors.

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

compiles to

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

I want to know, if I can

Avoid the excessive repeat of the Mixedin?
Avoid the double c&p for classname and mixedin-parameter in each mixedin-usage?

Thanks!

@vidstige Maybe, but it may be arguable that its a language knowledge question and thrown back here. — This company is turning evil., Aug 19 '15 at 19:18
So what happens when you change `#40FF01` to `#ff0000` but the name is still `logocolorgreen`? I think it would be wise to avoid colors in the name unless you are 100% certain the color will not change (ever). — Dark Falcon, Aug 19 '15 at 19:21
@DarkFalcon you are right! Do you have a better idea? i'm relative sure, because these are something like "corporate colors" and this code is used in a wordpress theme. if something important is changed, there will be a newer theme. — Basti, Aug 19 '15 at 19:26
I would recommend that your classes be named after elements of the page (e.g. `header`, `footer`, `menu`). Hard to tell if you can do this with the color variables or not. If not, they would be fine as-is. You would then just use the mixin manually in each rule that needs it. — Dark Falcon, Aug 19 '15 at 19:44
fyi, it is used for colored menus: http://i.imgur.com/gaomUcz.png So the color IS the menu. :-) — Basti, Aug 19 '15 at 19:53

This company is turning evil. · Answer 1 · 2015-08-19T22:54:25.337

You can use lists and 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();
}

This example results in the following CSS output:

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

The e() function is necessary for the class names, since if you used raw values for them, LESS would convert the names into #-colors, breaking output syntax.

As suggested in the comments, you should really reconsider your class names by naming them by usage, not content, whenever possible.

LESS/CSS: Avoid many LOC?

1 Answers1