有一个错误阻止了完美的方法
这是使用 LESS 1.4+。以下实现了它,但lighten()
由于当前 LESS 中存在一个错误,因此必须先完成(参见解决方案后面的解释)。
较少的
@numAssociations: 6;
@Associations: ebay google-shopping website feed twitter facebook;
@ebay-color: #ff0000;
@ebay-color-contrast: lighten(@ebay-color, 15%);
@google-shopping-color: #0000ff;
@google-shopping-color-contrast: lighten(@google-shopping-color, 15%);
@website-color: #ffff00;
@website-color-contrast: lighten(@website-color, 15%);
@feed-color: #ffffff;
@feed-color-contrast: lighten(@feed-color, 15%);
@twitter-color: #ffc0cb;
@twitter-color-contrast: lighten(@twitter-color, 15%);
@facebook-color: #ffa500;
@facebook-color-contrast: lighten(@facebook-color, 15%);
//loop code
.buildClassColorAssociations(@i) when (@i =< @numAssociations) {
@className: extract(@Associations, @i);
@bkgColor: ~'@{@{className}-color}';
@color: ~'@{@{className}-color-contrast}';
&.@{className} {
background-color: @bkgColor;
h2, p {
color: @color;
}
}
.buildClassColorAssociations(@i + 1);
}
//end the loop
.buildClassColorAssociations(@i) when (@i = (@numAssociations + 1)) {}
//call the loop
.buildClassColorAssociations(1);
CSS 输出
.ebay {
background-color: #ff0000;
}
.ebay h2,
.ebay p {
color: #ff4d4d;
}
.google-shopping {
background-color: #0000ff;
}
.google-shopping h2,
.google-shopping p {
color: #4d4dff;
}
.website {
background-color: #ffff00;
}
.website h2,
.website p {
color: #ffff4d;
}
.feed {
background-color: #ffffff;
}
.feed h2,
.feed p {
color: #ffffff;
}
.twitter {
background-color: #ffc0cb;
}
.twitter h2,
.twitter p {
color: #ffffff;
}
.facebook {
background-color: #ffa500;
}
.facebook h2,
.facebook p {
color: #ffc04d;
}
当然,这可以嵌套在任何类中,所以只需从内部调用 mixin
.box { .buildClassColorAssociations(1); }
以获得该类的原始所需输出。
错误说明:
理想情况下,代码应该是这样的:
较少的
@numAssociations: 6;
@Associations: ebay google-shopping website feed twitter facebook;
@ebay-color: #ff0000;
@google-shopping-color: #0000ff;
@website-color: #ffff00;
@feed-color: #ffffff;
@twitter-color: #ffc0cb;
@facebook-color: #ffa500;
//loop code
.buildClassColorAssociations(@i) when (@i =< @numAssociations) {
@className: extract(@Associations, @i);
@color: color(~'@{@{className}-color}'); //<-- color conversion fails, yet is
needed for lighten() to work so...
&.@{className} {
background-color: @color;
h2, p {
color: lighten(@color,15%); //<-- ... lighten fails, making a compile error
}
}
.buildClassColorAssociations(@i + 1);
}
//end the loop
.buildClassColorAssociations(@i) when (@i = (@numAssociations + 1)) {}
//call the loop
.buildClassColorAssociations(1);
但是,CSS 输出显示 LESS 没有正确处理颜色转换,所以lighten()
函数失败(它会产生编译错误),因为@color
正在生成这个 CSS 输出:
.ebay {
background-color: #NaNeebbaaNaNNaNccNaNNaNNaNNaNNaN;
}
.ebay h2,
.ebay p {
/* color: lighten(@color,15%); yields an error */
}
.google-shopping {
background-color: #NaNNaNNaNNaNNaNNaNeeNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNccNaNNaNNaNNaNNaN;
}
.google-shopping h2,
.google-shopping p {
/* color: lighten(@color,15%); yields an error */
}
.website {
background-color: #NaNNaNeebbNaNNaNNaNeeNaNccNaNNaNNaNNaNNaN;
}
.website h2,
.website p {
/* color: lighten(@color,15%); yields an error */
}
.feed {
background-color: #NaNffeeeeddNaNccNaNNaNNaNNaNNaN;
}
.feed h2,
.feed p {
/* color: lighten(@color,15%); yields an error */
}
.twitter {
background-color: #NaNNaNNaNNaNNaNNaNeeNaNNaNccNaNNaNNaNNaNNaN;
}
.twitter h2,
.twitter p {
/* color: lighten(@color,15%); yields an error */
}
.facebook {
background-color: #NaNffaacceebbNaNNaNNaNNaNccNaNNaNNaNNaNNaN;
}
.facebook h2,
.facebook p {
/* color: lighten(@color,15%); yields an error */
}