Question

我正在尝试使用LESS来动态生成一组mixins，这些mixins可以帮助我编写更干净的媒体查询代码。到目前为止，由于我对语言的了解有限，我将代码看起来像这样：

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

目标是拥有一组mixins，这些mixins允许我轻松，干净地为特定断点定义一些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 */
  );
}

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

注意：较少的编译器在这里总是遇到插值问题 - @media (min-width: @screen-@{sizeName})也是（我不确定它是否已被解决）而且＆＃ 39;为什么我创建了一个临时变量。

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

1 个答案: