Question

我创建了许多mixins来为各种目的生成不同类型的类。具体来说，我必须使用标准引导变量名称设置一个独特的着色器，例如（仅举例）：

@type-primary: #fff;
@type-success: #f00;
@type-info: #ff0;
@type-default: #000;
@type-warning: #0f0;
@type-danger: #0ff;

实际上我用以下形式创建了我的mixins，其中包含了＃34;母亲＆＃34;作为前缀，我附加了各种后缀

.text
{
  &-primary { .color_text(@type-primary); }
  &-success { .color_text(@type-success); }
  &-info    { .color_text(@type-info); }
  &-default { .color_text(@type-default); }
  &-warning { .color_text(@type-warning); }
  &-danger  { .color_text(@type-danger); }
}

在此之后，我可以创建最终调用的mixin，例如（这么简单，因为它只是一个例子）

.color_text (@color)
{
  color:@color;
}

我想自动化和优化.text mixin以避免重复的行，我想用for循环。怎么可能？

最终结果应该是（在这种情况下）

.text-primary {
  color: #fff;
}
.text-success {
  color: #f00;
}
.text-info {
  color: #ff0;
}
.text-default {
  color: #000;
}
.text-warning {
  color: #0f0;
}
.text-danger {
  color: #0ff;
}

在 PSEUDO-CODE 中，这样的事情可能是理想的

@type-primary: #fff;
@type-success: #f00;
@type-info: #ff0;

.createContextClass("classNamePrefix",{@type-primary,@type-success,@type-info},mixinToBeCalled);

// Another call could be
.createContextClass("otherClassNamePrefix",{@type-primary,@type-success},otherMixinToBeCalled);

其中，相对于我的原始代码，classNamePrefix应该是最终CSS类的第一部分的名称，然后传递一个数组，其中包含我希望在最终CSS代码中使用的所有类型的后缀，并且{{ 1}}是mixin，为最终mixinToBeCalled，.text-primary，.text-success创建所有css规则。

目前，关注 Seven-Phases-Max ＆＃39;建议，我在following way

中改进了他的解决方案

LESS：如何将一个被调用的mixin列表转换为一个具有唯一调用的for循环

0 个答案: