我可以使用 mixins 在 LESS 中生成新的 mixins 吗？答案

【问题标题】：Can I use mixins to generate new mixins in LESS?我可以使用 mixins 在 LESS 中生成新的 mixins 吗？
【发布时间】：2016-05-12 10:41:48
【问题描述】：

我正在尝试使用 LESS 动态生成一组可以帮助我编写更清晰的媒体查询代码的 mixin。到目前为止，在我对语言的有限了解中，我整理了如下代码：

@sizes: xxs, xs, sm, md, lg;

.mediaQueries(@iterator:1) when(@iterator <= length(@sizes)) {

    //Extract name
    @sizeName: extract(@sizes, @iterator);

    //Attempt to build min-width query 
    .MQ-min-@{sizeName} (@content) {
      @media (min-width: @screen-@{sizeName}) {
        @content();
      }
    }

    //Attempt to build max-width query 
    .MQ-max-@{sizeName} (@content) {
      @media (max-width: @screen-@{sizeName}) {
        @content();
      }
    }

    .mediaQueries((@iterator + 1));
}
.mediaQueries();

我们的目标是拥有一组 mixin，让我可以轻松干净地为特定断点定义一些 CSS 属性，如下所示：

.generic-class {
  background: black;
  //Sizes @screen-sm and up 
  .MQ-min-sm({ 
    background: transparent;
  })
}

它不起作用。需要注意的是，我正在尝试将大小名称插入到变量名称中，然后将该变量的 px 值输出到 @media 查询中。这样的事情甚至可能吗？

否则我的编译器当前会在嵌套 mixin (.MQ-min-@{sizeName} (@content) {) 的开始处中断，并出现错误：

Potentially unhandled rejection [2] Missing closing ')' in file ../mixins.less line no. 43

我想要实现的目标是否可能？

【问题讨论】：

第43行的代码是什么？
第一个嵌套 mixin 的开始 - .MQ-min-@{sizeName} (@content) {
你有自动前缀吗？在谷歌搜索似乎是个问题。但是没有足够的信息。
不，您不能动态设置 mixin 的名称（这就是为什么 @content 会出错）。您打算使用为 selectors 而不是 mixin 名称设计的选择器插值。
@Harry 为什么错误是missing closing ')'？这不是很解释:(

标签： css less less-mixins

【解决方案1】：

我认为实现这一点的最简单方法是使用如下所示的单个参数 mixin。这避免了所有这些迭代、动态混合创建等的需要。

@sizes: xxs, xs, sm, md, lg;
@screen-xxs: 100px;
@screen-sm: 200px;

.MQ(@content, @sizeName, @max-min) { /* get ruleset, size name and min/max as input */
  @selector: ~"(@{max-min}-width: @{screen-@{sizeName}})"; /* form the media selector */
  @media @selector { /* use it */
    @content();
  }
}

.generic-class {
  background: black;
  .MQ({ 
        background: transparent;
      }, /* ruleset */
      sm, /* screen size */
      max /* min/max */
  );
}

如果 mixin 是供您自己使用的，那么这就是您所需要的。如果它是作为库分发，那么您可能需要在 @sizeName 和 @max-min 变量上设置一些保护措施以限制无效值。

注意： Less 编译器在这里的插值总是有问题 - @media (min-width: @screen-@{sizeName}) 也是（我不确定它是否已经解决），这就是我创建的原因一个临时变量。

【讨论】：