2

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

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

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

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

任何帮助，将不胜感激。

4

1 回答 1

2

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

.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;
}

如您所见，上面输出的最终选择器 is.mainContainer a .link和 not .mainContainer a.link。如果您试图实现后者，那么一个选项是您&在.formatermixin 的代码本身中添加。

.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 */
于 2015-11-18T07:38:55.313 回答