css - 将@media 查询作为与 LESS 的混合

Question

使用 LESS 的混合非常简单:

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

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

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

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

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

---

编辑

具体来说，here is a summary of the code我正在尝试使用作为混合:

.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);