2014-09-19 79 views
1

在我的項目中,我使用4種顏色主題,並且使用此功能,我想自動分配變量中包含的特定顏色值,並且還想使用變量的名稱將其分配給類。我怎樣才能使這個LESSCSS環路正常工作?

// the variables 
@peach: 3399cc; 
@green: ff00CC; 
@orange: FF0033; 
@yellow: EE0033; 

@list: @peach, @green, @orange, @yellow; 

//我LESS功能

它與變量值生成的類名稱:例如:bsq3399cc我想的類名相同的變量名:前BSQ桃

我正在使用.for函數,如此處所述。 https://github.com/seven-phases-max/less.curious/blob/master/articles/for-each.md

.bsq { 
    .for(@list); .-each(@name) { 
     &@{name} { 
      @color: color("#@{name}"); 
      li& { background: @color; } 
      li& strong { background:lighten(@color, 10%); } 
      li& i { background:lighten(@color, 20%); } 
     } 
    } 
} 

的。對於混入//

// ............................................................ 
// .for 

.for(@i, @n) {.-each(@i)} 
.for(@n)  when (isnumber(@n)) {.for(1, @n)} 
.for(@i, @n) when not (@i = @n) { 
    .for((@i + (@n - @i)/abs(@n - @i)), @n); 
} 

// ............................................................ 
// .for-each 

.for(@array) when (default()) {.for-impl_(length(@array))} 
.for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} 
.for-impl_(@i) when (@i > 0) {.-each(extract(@array, @i))} 

我使用的HTML代碼是在這裏。

<ul class="testing"> 
    <li class="bsq3399cc"><strong>1</strong><i>10</i></li> 
    <li class="bsqff00CC"><strong>2</strong><i>20</i></li> 
    <li class="bsqFF0033"><strong>3</strong><i>30</i></li> 
    <li class="bsqEE0033"><strong>4</strong><i>40</i></li> 
</ul> 

回答

1

好了,你的代碼段錯誤是,你居然不提供者爲類「名稱」(即peach,​​,orangeyellow),但只有十六進制顏色值。 注意在:

// the variables 
@peach: 3399cc; 
@green: ff00CC; 
@orange: FF0033; 
@yellow: EE0033; 

@list: @peach, @green, @orange, @yellow; 

@list等於3399cc, ff00CC, FF0033, EE0033

我猜你真正的意思是這樣的:

@peach: #3399cc; 
@green: #ff00CC; 
@orange: #FF0033; 
@yellow: #EE0033; 

@list: 'peach', 'green', 'orange', 'yellow'; 

li.bsq- { 
    .for(@list); .-each(@name) { 
     @name_: e(@name); 
     @color: @@name; 
     &@{name_} { 
      background: @color; 
      strong {background: lighten(@color, 10%)} 
      i  {background: lighten(@color, 20%)} 
     } 
    } 
} 

---

此外,我也擺脫@green/'green'重複的,除非你真的需要那些在其他地方不同的變量:例如參見Loop over an array of name value pairs in LESShttps://stackoverflow.com/a/25877100中的最後一個例子(與相同方法的方法相反)。

相關問題