Question

............................................... ...

现有的mixins：

.mixin_1 {
    height: 1px;
}
.mixin_2 {
    height: 2px;
}
.mixin_3 {
    height: 3px;
}

.function(@get) {
  @get();
}

CALL：

.a{
  .function(mixin_1);
}
.b{
  .function(mixin_2);
}
.c{
  .function(mixin_3);
}

结果：

.a{
  height: 1px;
}
.b{
  height: 2px;
}
.c{
  height: 3px;
}

问题：怎么做？目前的语言规范是否可行？

Answer 1

您目前无法直接根据变量动态调用mixin。您可以将function() mixin变成“调用者”或“getter”mixin，在其中注册可由function() mixin调用的mixin，如此（使用模式匹配）：

<强> LESS

.function(@get) {
  .-(@get); //call for mixin
  //register mixins you want to call with function
  .-(mixin_1) { .mixin_1; }
  .-(mixin_2) { .mixin_2; }
}

.mixin_1 {
    height: 1px;
}
.mixin_2 {
    height: 2px;
}

#block {
    .function(mixin_1);
}

<强>输出

.mixin_1 {
  height: 1px;
}
.mixin_2 {
  height: 2px;
}
#block {
  height: 1px;
}

当然，如果你想让mix对CSS不可见，那么把它们改成：

较少更改（添加括号）

.mixin_1() {
    height: 1px;
}
.mixin_2() {
    height: 2px;
}

新输出

#block {
  height: 1px;
}

你需要吗？

这种抽象级别有时很有用，但通常只需对mixin进行模式匹配就足够了。你必须确定这一点。因此，通过这个简单的示例，最好将其简化为：

.setHeight(1) {
    height: 1px;
}
.setHeight(2) {
    height: 2px;
}

#block {
    .setHeight(1);
}

更复杂的mixin示例可能不会那么容易减少，然后像你想要的那样混合可能会有用。

Answer 2

我认为你的代码做同样的事情：

.mixin_1() {
    height: 1px;
}

.mixin_2() {
    height: 2px;
}

#block {
    .mixin_1();
}

输出将是：

#block {
  height: 1px;
}

我问的是一些不同的东西。但是我找到了解决方案：

.function(@get) {
  .-(@get); //call for mixin
  //register mixins you want to call with function
  .-(mixin) { .mixin; }
}

#block {
    .mixin() {
        height: 1px;
    }
    .function(mixin);
}

#block {     
    .mixin() {
        height: 2px;
    }
    .function(mixin);
}

它输出我想要的东西：

#block {
  height: 1px;
}
#block {
  height: 2px;
}

总的来说，感谢您的帮助。

将mixin作为函数参数

2 个答案:

你需要吗？