为什么我们不能在同一个规则集中使用规则集？

Question

我正在尝试在自身内部使用相同的 .formater() 规则集。我收到语法错误。

为什么我们不能在其内部使用规则集？

.formater(@className;@rules){
    .@{className}{
        @rules();
    }
}

.formater(mainContainer;{
    display:block;
    line-height:2em;
    & a{
       colour: blue;
       &.formater(link;{
         colour:red;
       });
    }
});

如有任何帮助，我们将不胜感激。

Answer 1

语法错误的原因是因为您将 & 附加到不允许的 mixin 调用。 & 只能附加到选择器。如果您在 mixin 调用之前删除 &，那么您的代码将可以正常编译。

.formater(@className; @rules){
  .@{className}{
    @rules();
  }
}

.formater(mainContainer; {
  display:block;
  line-height:2em;
  & a{
    colour: blue;
    .formater(link; {
      colour:red;
    });
  }
});

上面的 Less 代码在编译时会产生以下 CSS:

.mainContainer {
  display: block;
  line-height: 2em;
}
.mainContainer a {
  colour: blue;
}
.mainContainer a .link {
  colour: red;
}

如您所见，上面输出的最终选择器是 .mainContainer a .link 而不是 .mainContainer a.link。如果你想实现后者，那么一个选择是在 .formater mixin 的代码本身中添加 &。

.formater(@className; @rules) {
  &.@{className} {
    @rules();
  }
}

我真的不推荐使用下面的选项，但是如果你需要 .formater() 混合来支持这两种变体，那么你可以使用一个变量和保护条件并酌情使用。

.formater(@className; @rules; @parent-append: false) {
  & when not (@parent-append = false) {
    &.@{className} {
      @rules();
    }
  }
  & when (@parent-append = false) {
    .@{className} {
      @rules();
    }
  }  
}

然后您可以将 mixin 称为

.formater(link; {colour:red;}; true); /* if & should be appended */

或

.formater(link; {colour:red;};); /* if & need not be appended */

为什么我们不能在同一个规则集中使用规则集？

Why cannot we use ruleset within the same ruleset?

less

less-mixins