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。如果您正在尝试实现后者，那么您可以在& mixin的代码中添加.formater。

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

我不建议使用以下选项，但如果您需要.formater() mixin来支持这两种变体，那么您可以使用变量以及保护条件并在适当时使用。

.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 */

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

1 个答案: