我想用一些颜色动态调用 .some-mixin() 。这个 mixins 应该生成一些样式,当颜色相等时应该生成特殊代码。
由于最终的CSS代码的比较,我想通过帮助变量来完成它,我可以在哪里存储特殊代码的类。
也许示例代码会更有帮助:
.some-mixin(@newClass,@color,@color2){
.test-mixin(@newClass,@color,@color2);
.@{newClass}{
color: @color;
}
}
@classes: '';
.test-mixin(@newClass,@color,@color2) when (@color = @color2){
@classes: "@{classes}, @{newClass}";
}
.final-mixin(){
.@{classes}{
/*some styles*/
}
}
mixins 的调用由 PHP 生成,最终代码应如下所示:
.some-mixin("abc",#ffffff,#000000);
.some-mixin("xyz",#ffffff,#ffffff);
.some-mixin("jkl",#ff00ff,#ff00ff);
.final-mixin();
但是当我想编译 LESS 时,它显示检测到无限循环
这在 LESS 中可能吗?
任何建议都会有所帮助。
最佳答案
正如评论中所解释的,您的问题是下面一行中的递归变量定义。 Less 不支持这一点,如 this answer 中所述。和 this one .
@classes: "@{classes}, @{newClass}";
根据您在评论中的需求解释(当颜色不同时会有一些额外的填充等),您可以使用以下方法之一。
选项 1:(将为每个类添加填充以及重复的代码)
.some-mixin(@newClass,@color,@color2){
.@{newClass}{
color: @color;
& when not (@color = @color2){
padding: 4px;
}
}
}
.some-mixin(abc,#ffffff,#000000);
.some-mixin(xyz,#ffffff,#ffffff);
.some-mixin(jkl,#ff00f0,#ff00ff);
上面的 Less 会编译成下面的 CSS:
.abc {
color: #ffffff;
padding: 4px; /* colors were different */
}
.xyz {
color: #ffffff;
}
.jkl {
color: #ff00f0;
padding: 4px; /* colors were different */
}
选项 2:(使用虚拟类 + 扩展,因此代码较少)
此选项可能正是您正在寻找的,因为它可以避免代码重复。我们无法扩展
mixin,因此我们使用虚拟类。这不应该是一个大问题,因为它只是为输出 CSS 添加了一行额外的内容。
.common-padding-diff-color{ /* all styles that are needed when colors are different */
padding: 4px;
}
.some-mixin(@newClass,@color,@color2){
.@{newClass}{
color: @color;
& when not (@color = @color2){
&:extend(.common-padding-diff-color);
}
}
}
.some-mixin(abc,#ffffff,#000000);
.some-mixin(xyz,#ffffff,#ffffff);
.some-mixin(jkl,#ff00f0,#ff00ff);
这将编译成
.common-padding-diff-color,
.abc,
.jkl {
padding: 4px; /* style applied for all cases where colors are not same */
}
.abc {
color: #ffffff;
}
.xyz {
color: #ffffff;
}
.jkl {
color: #ff00f0;
}
关于css - 在 LESS 变量中追加字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28215538/