Less 用于生成媒体查询的函数较少

您能否用LESS编写一个函数，在传入断点的值时输出媒体查询

我希望能够像这样动态创建它们：

  // Something like this

  .media(@min, @max) {
    @query: ~"@media (min-width: @{min}) and (max-width: @{max})";
  }

  .class {
    .media(100px, 400px) {
      color: red;
    }

    .media(401px, 500px) {
      color: green;
    }
  }

  // Outputs this:

  @media (min-width: 100px) and (max-width: 400px) {
    .class {
      color: red;
    }
  }
  @media (min-width: 401px) and (max-width: 500px) {
    .class {
      color: green;
    }
  }

我想我已经做到了，但是因为mixin是在同一个范围内调用的，所以在第二次调用中没有分配变量：

  .media (@min, @max) {
    @query: ~"(min-width: @{min}) and (max-width: @{max})";
  }

  .class {
    width: 100%;
    max-width: 300px;

    .media(100px, 400px);
    @media @query {
      color: red;
    }

    .media(401px, 800px);
    @media @query {
      color: green;
    }

  }

---

第一个代码段的主要问题是不能使用mixin调用为

{…}

块设置标识符。在代码段中，请执行以下操作：

.media(100px, 400px) {
    color: red;
}

实际上是一个新的mixin定义，而不是以前定义的

.media

mixin调用（因此它不会输出任何内容，因为这个新的mixin从未被调用）。 以及正确的mixin调用语法：

.media(100px, 400px); {
   color: red;
}

在这种情况下，相当于：

@query: ~"@media (min-width: 100px) and (max-width: 400px)"; {
   color: red;
}

这当然没有任何意义，因为它会抛出一个错误

----

您的第二个代码段更为正确，但是是的，因为两个mixin调用共享相同的作用域，所以只有一个

@query

变量。可以通过将它们放入未命名的命名空间（这只是一个具有名称的规则集，因此它创建了一个新范围，但随后作为外部规则集的一部分输出）来隔离它们：

这是一个技巧，但显然它看起来不是真正有用的东西（太冗长和不可读），因此为了参考起见，提及其他方法是有意义的：

----

今天，针对特定情况，最干净的解决方案是使用：

虽然我怀疑在实际项目中，每次需要相应的媒体时，您是否会明确重复像素值，因此最终很可能会以更多语义混合结束，例如：

.media(@min, @max, @styles) {
    @media (min-width: @min) 
        and (max-width: @max) {
            @styles();
    }
}

.tiny-screen(@styles)        {.media(100px, 400px, @styles)}
.not-so-tiny-screen(@styles) {.media(401px, 800px, @styles)}

.class {
    .tiny-screen({
        color: red;
    });

    .not-so-tiny-screen({
        color: green;
    });
}

----

---

将规则集传递给mixin并不是实现这一目标的唯一方法，还有其他方法有各种优缺点（如果采用“语义媒体块”的方式，其中一些方法看起来更可读）。例如，请参见（显然，在这里搜索

[less]媒体

，以便找到更多的灵感）。

我昨天实际上在做一件事，与您上两个片段非常相似，但是，正如您所提到的，它变得过于冗长而不实用+我需要一个非常彻底的答案。非常感谢。

.media(@min, @max, @styles) {
    @media (min-width: @min) 
        and (max-width: @max) {
            @styles();
    }
}

.class {
    .media(100px, 400px, {
        color: red;
    });

    .media(401px, 800px, {
        color: green;
    });
}

.media(@min, @max, @styles) {
    @media (min-width: @min) 
        and (max-width: @max) {
            @styles();
    }
}

.tiny-screen(@styles)        {.media(100px, 400px, @styles)}
.not-so-tiny-screen(@styles) {.media(401px, 800px, @styles)}

.class {
    .tiny-screen({
        color: red;
    });

    .not-so-tiny-screen({
        color: green;
    });
}