在Less mixin中带有参数的动态类名 [英] Dynamic classnames with parameters in Less mixin

问题描述

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

I'm trying to create a Less mixin to generate media queries. The goal is to store my breakpoints in a variables.less file, and loop through them to create @media blocks.

然后将mixin用作:

The mixin would then be used as:

.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传递给输出.我以前使用静态类名来完成此操作，例如:

So far my code loops through and generates empty @media blocks. However, I need to pass any @rules through to the output. I've done this with static classnames previously, like this:

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

那很好.

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

But with the dynamic name it's causing errors. I've tried adding an additional parameter to the .mq-@{breakpoint} statements, like:

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

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

This results in various errors. How can pass the included rules through so they're included in the mixin's output?

推荐答案

不，您不能在参数混合名称中使用变量.因此，您不能通过标识符列表生成" mixin.所以您需要发明其他方法...

No, you can't use variables in parametric mixin names. Thus you can't "generate" mixins by a list of identifiers. So you need to invent some other approach...

嗯，有几种可能性-例如，请注意，mixin名称中的@{breakpoint}部分只不过是另一个mixin参数而已.然后可以将其编码为(简化):

Well, there're several possibilities - for example notice that @{breakpoint} part of the mixin name is nothing but just another mixin parameter. Then it could be coded as something like (simplified):

// 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();}
    }
}

---

或者(只是为了说明那些几种可能性")，实际上可以通过某些技巧和技巧使设备ID成为名称的 prefix 部分.例如:

// 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;
    }
});  

此技巧滥用了以下事实:变量可以用作规则集名称的一部分(然后我们可以将其用作非参数名称空间前缀)，但是我永远不会为实际项目推荐此代码(只是<太过粗暴并且有缺陷).

This trick abuses the fact that variables can be used as part of a ruleset name (and then we can use it as a non-parametric namespace prefix), but I would never recommend this code for a real project (it's just too hacky and flawed by any means).

这篇关于在Less mixin中带有参数的动态类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！