在 LESS 变量中追加字符串

Question

我想用一些颜色动态调用 .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*/
    }
}

mixin 的调用由 PHP 生成，最终代码应如下所示：

.some-mixin("abc",#ffffff,#000000);
.some-mixin("xyz",#ffffff,#ffffff);
.some-mixin("jkl",#ff00ff,#ff00ff);
.final-mixin();

但是当我想编译 LESS 时它显示 infinite loop detected

这在 LESS 中可行吗？

任何建议都会有帮助。

Answer 1

如评论中所述，您的问题是下一行中的递归变量定义。如 this answer and this one.

中所述，Less 不支持此功能

@classes: "@{classes}, @{newClass}";

根据您在评论中的需求说明（当颜色不同时会有一些额外的填充等），您可以使用以下方法之一。

选项 1：（将为每个 class 等重复代码添加填充）

.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：（使用虚拟 class + 扩展等更少的代码）

这个选项可能就是您要找的，因为它可以避免代码重复。我们不能 extend 混入，因此我们使用虚拟 class。这应该不是一个大问题，因为它只是向输出添加了一行 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;
}

在 LESS 变量中追加字符串

Append string in LESS variable

css

mixins

less