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

Question

我正在尝试使用 LESS 动态生成一组混合宏，这将帮助我编写更清晰的媒体查询代码。到目前为止，我对语言的了解有限，我已经将代码放在一起，如下所示：

@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();

目标是拥有一组混入，使我能够轻松干净地为特定断点定义一些 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

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

Answer 1

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

@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}) 还有（我不确定它是否已被解决) 这就是我创建临时变量的原因。

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

Can I use mixins to generate new mixins in LESS?

css

less

less-mixins