loopslessless-mixins

Loop issues with Less


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

Solution

  • 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");