将@media查询作为mixins包含在LESS中

Question

使用LESS的Mixins非常简单:

.some-rules() {
  /* some rules */
}
.some-class {
  .some-rules;
}

但是,假设我在媒体查询中有一个规则集,例如:

@media (min-width: 800px) {
  .my_ruleset {
    /* more rules */
  }
}

如何将这样的规则集包含在mixin中？

我的动机是我使用Bootstrap.我试图避免使用其选择器在语义上污染我的标记,而宁愿将其规则集合作为mixins.鉴于上面的第一个例子,这很简单,但我不确定如何合并@media选择器.

---

编辑

具体而言,这里是代码的总结我试图使用作为一个mixin:

.container {
  .container-fixed();
}

// ...

@media (min-width: @screen-sm) {
  .container {
    max-width: @container-sm;
  }

  // ...
}

@media (min-width: @screen-md) {
  .container {
    max-width: @container-md;
  }

  // ...
}


@media (min-width: @screen-lg-min) {
  .container {
    max-width: @container-lg;
  }

  // ...
}

Answer 1

只需添加: -

.my_ruleset {
    /* more rules */
  }

@media (min-width: 800px) {
  .my_ruleset;
}

如果你想为此添加参数,那么: -

.my_ruleset(@myMargin:5px;) {
    margin:@myMargin;
  }

@media (min-width: 800px) {
  .my_ruleset(10px);
  /* New Rules*/
}
.
.
/* And so On */

更新: -

如果你想以动态形式对其进行调整,请将整个媒体查询整合到mixin中并使用它...

.container(
    @minSize:768px; 
    @maxSize:979px; 
    @myColor:green;
        /* So on */
) {
    @media (min-width: @minSize) and (max-width: @maxSize) {
      .my_ruleset {
            background-color:@myColor;
      }
      /* New Rules*/
    }
}

.container(0px,480px,black);
.container(481px,767px,blue);
.container(768px,979px,pink);
.container(980px,1200px,white);
.container(1700px,2200px,red);