Question

我正在尝试创建Less mixin来生成媒体查询。目标是将我的断点存储在variables.less文件中，并循环遍历它们以创建@media块。

然后将mixin用作：

.mq-medium({
  // rules
});

生成CSS，如：

@media only screen and (min-width: 640px) {
  // rules
}

这是我目前的混音：

variables.less

/* media queries */
@breakpoints: small 0, medium 640px, large 1024px, xlarge 1281px, xxlarge 1440px;

mediaqueries.less

.createMQClasses(@iterator:1) when(@iterator <= length(@breakpoints)-1) {
  @breakpoint: extract(extract(@breakpoints, @iterator),1);
  @breakpoint-next: extract(@breakpoints, (@iterator + 1));
  @breakpoint-next-px: extract(@breakpoint-next, 2);
    .mq-@{breakpoint} {
      @media only screen and (min-width: extract(extract(@breakpoints, @iterator),2)) {
      }
    }

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

.createMQClasses();

到目前为止，我的代码遍历并生成空@media块。但是，我需要将任何@rules传递给输出。我以前用静态类名完成了这个，比如：

.mq-medium(@rules) {
  @media only screen and (min-width: extract(extract(@breakpoints, 2),2)) {
    @rules();
  }
}

这很好用。

但是使用动态名称会导致错误。我已尝试在.mq-@{breakpoint}语句中添加其他参数，例如：

.mq-@{breakpoint}(@rules) {
  @media only screen and (min-width: extract(extract(@breakpoints, @iterator),2)) {
    @rules();
  }
}

这会导致各种错误。如何通过所包含的规则，以便它们包含在mixin的输出中？

Answer 1

不，您不能在参数mixin名称中使用变量。因此，您无法生成＆＃34; mixins由标识符列表组成。所以你需要发明一些其他方法......

嗯，有几种可能性 - 例如注意到mixin名称的@{breakpoint}部分只是另一个mixin参数。然后它可以编码为（简化）：

// usage:

@devices: small 0, medium 640px, large 1024px;

.mq(medium, {
    foo {
        bar: baz;
    }
});  

// impl.:

.mq(@id, @style) {
    .-(length(@devices));
    .-(@i) when (@i > 0) {
        .-(@i - 1);
        .--(extract(@devices, @i));
    }
    .--(@device) when (@id = extract(@device, 1)) {
        @media (min-width: extract(@device, 2)) {@style();}
    }
}

---

或者（仅为了说明那些＆＃34;几种可能性＆＃34;），实际上可以通过某些技巧和黑客使设备ID成为名称的前缀部分。 E.g：

// impl.:
// (here mixin definitions should always go before their usage)

.make-media-mixins();
.make-media-mixins(@i: length(@devices)) when (@i > 0) {
    .make-media-mixins(@i - 1);
    @device: extract(@devices, @i);
    @id: extract(@device, 1);
    .@{id} {.mq(@rules) {
        @media (min-width: extract(@device, 2)) {@rules();}
    }}
}

// usage:

@devices: small 0, medium 640px, large 1024px;

.medium.mq({
    foo {
        bar: baz;
    }
});

这个技巧滥用了变量可以用作规则集名称的一部分这一事实（然后我们可以将它用作非参数命名空间前缀），但我永远不会推荐这个代码用于实际项目（＆＃39） ;只是太 hacky并且无论如何都有缺陷。）

参数在Less mixin中的动态类名

1 个答案:

---