[英]Loop issues with Less
I am trying to create the following Less via a loop. 我正在尝试通过循环创建以下Less。
@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. 我有许多品牌颜色,并且想用该颜色调用mixin / loop,并将其打印出5类。
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. 您只需要创建两个变量-一个会产生必须添加到选择器中的数字(代码段中的@sel
),另一个则是第一个变量的精确逆数( 100% - @sel
),将其设置为着色百分比。
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. 另外,由于您不希望数字为0时将数字附加到选择器上(在这种情况下,否则为带有颜色的颜色),因此我们需要在mixin中添加保护条件,以像if语句一样执行。
@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");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.