在我的項目中,我使用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>