循環問題更少

我正嘗試通過循環創建以下內容。循環問題更少

@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) { 
    &[email protected]{name}-20 { background: tint(@colour, 80%); } 
} 
.brand-scale-loop(@iterations,@brand-gold,gold); 
.brand-scale-loop(@iterations,@brand-black,black);

來源

2017-02-23 davidjh

好的，你有沒有嘗試過創建循環？如果是的話，你能告訴我們代碼嗎？ – Harry

嗨，這是我的代碼到目前爲止 '@iterations：5; @ brand-gold：＃bd9e5e; @ brand-black：＃231f20; 。品牌規模環（@ I，@顏色，@名稱）時（@i> 0）{ \t &[email protected]{name}-20 { \t \t背景：色調（@colour，80 ％）; } } .brand-scale-loop（@ iterations，@ brand-gold，gold）; .brand-scale-loop（@ iterations，@ brand-black，black）;' 我在創建色調時遇到了麻煩％ – davidjh

您的意思是，當選擇器中的值遞增時，找不到用於減少它的邏輯？這是你的問題嗎？ – Harry

基於您的評論，下面好像是你在找什麼。您只需創建兩個變量 - 一個生成必須附加到選擇器中的數字（片段中的@sel），另一個變量是第一個變量的精確倒數（100% - @sel），設置爲色調百分。

此外，因爲你不希望添加到選擇當它是0的號碼（或在這種情況下被染色的顏色），我們需要將混入中添加後衛條件以執行類似如果聲明。

@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 */ 
    &[email protected]{name} { background: @colour; } 
    } 
    & when not(@sel = 0) { /* for all other cases append number to selector and tint */ 
    &[email protected]{name}[email protected]{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");

來源

2017-02-23 11:11:46 Harry

循環問題更少

回答

相關問題