Less 的循环问题

Question

我正在尝试通过循环创建以下 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%)
}

我有很多品牌颜色，我想用颜色调用 mixin/loop 并让它打印出 5 类。

有人可以帮忙吗？

到目前为止，这是我的代码。 我在创建色调 % 时遇到问题。

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

Answer 1

根据您的评论，以下内容似乎是您要查找的内容。您只需创建两个变量 - 一个生成必须附加在选择器中的数字（片段中的@sel），另一个是第一个变量的精确倒数（100% - @sel）设置为 tint 百分比。

此外，由于您不希望数字为 0 时附加到选择器（或在这种情况下要着色的颜色），我们需要添加 guard 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");

Less 的循环问题

Loop issues with Less

loops

less

less-mixins