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