Loop issues with Less

Question

I am trying to create the following Less via a loop.

@brand-gold: #bd9e5e;

&.brand-gold {
 background:@brand-gold;
}
&.brand-gold-20 {
 background: tint(@brand-gold, 80%)
}
&.brand-gold-40 {
 background: tint(@brand-gold, 60%)
}
&.brand-gold-60 {
 background: tint(@brand-gold, 40%)
}
&.brand-gold-80 {
 background: tint(@brand-gold, 20%)
}

I have a number of brand colours and would like to call a mixin/loop with the colour and have it print out the 5 classes.

Could someone help in this please?

Here is my code so far. I am having troubles creating the tint %.

@iterations: 5; 
@brand-gold: #bd9e5e; 
@brand-black: #231f20; 
.brand-scale-loop (@i,@colour,@name) when (@i > 0) { 
  &.brand-@{name}-20 { background: tint(@colour, 80%); } 
} 
.brand-scale-loop(@iterations,@brand-gold,gold); 
.brand-scale-loop(@iterations,@brand-black,black);

Ok, so have you tried creating the loop at all? If yes, can you show us the code? — Harry, Feb 23 '17 at 10:23
Hi, Here is my code so far `@iterations: 5; @brand-gold: #bd9e5e; @brand-black: #231f20; .brand-scale-loop (@i,@colour,@name) when (@i > 0) { &.brand-@{name}-20 { background: tint(@colour, 80%); } } .brand-scale-loop(@iterations,@brand-gold,gold); .brand-scale-loop(@iterations,@brand-black,black);` I am having troubles creating the tint % — davidjh, Feb 23 '17 at 10:56
You mean you can't find a logic for decrementing it as the value in the selector increments? Is that your problem? — Harry, Feb 23 '17 at 10:59

Harry · Accepted Answer · 2017-02-23T11:18:14.320

Based on your comment, the below seems to be what you are looking for. You just have to create two variables - one which produces the number that has to be appended in the selector (@sel in snippet) and the other which is an exact inverse (100% - @sel) of the first variable to set as the tint percent.

Additionally since you don't want the number to appended to the selector when it is 0 (or the color to be tinted in such cases), we need to add guard conditions within the mixin to perform like if statement.

@iterations: 5; 
@brand-gold: #bd9e5e; 
@brand-black: #231f20; 

.brand-scale-loop (@i,@colour,@name) when (@i > 0) {
  @sel: (100 * (@i - 1) / @iterations); /* calculate the number to append in selector */
  @tint: 100% - @sel; /* inverse of the no. from previous step is tint percentage */

  & when (@sel = 0) { /* dont apply tint or add 0 in selector when value is 0 */
    &.brand-@{name} { background: @colour; }
  }
  & when not(@sel = 0) { /* for all other cases append number to selector and tint */
    &.brand-@{name}-@{sel} { background: tint(@colour, @tint);} 
  }

  .brand-scale-loop(@i - 1,@brand-gold,@name); /* call for next iteration */

} 

/* call as many times as you need with as many values */
/* used the ~"" syntax for color names to be backward compatible. Older Less versions used to convert such names into hex codes in output */

.brand-scale-loop(@iterations,@brand-gold,~"gold"); 
.brand-scale-loop(@iterations,@brand-black,~"black");

Loop issues with Less

1 Answers1