以下のループ問題

Question

以下の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%) 
} 

私はいくつかのブランドカラーを持っており、そのカラーでミックスイン/ループを呼び出し、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）の2つの変数を作成するだけです。パーセント。あなたはそれが0（またはそのような場合に着色する色）であるとき、セレクタに追加する番号をしたくないので、さらに

、我々は次のように実行するためにミックスイン内ガード条件を追加する必要があります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");