Question

与LESS的Mixins非常简单：

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

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

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

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

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

修改

具体来说，here is a summary of the code我正在尝试使用作为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);

Answer 2

修改

查看这两个答案（ class set in media query ， media query grouping ），我觉得他们与您的问题密切相关。看着第二个答案，我试着把东西放在一起。该片段位于下方，但您也可以看到我放在一起的 demo.tar.gz 。

<强> main.less

@import "less/bootstrap"; /*Obviously, make sure to have all the less src :)*/ /*source: http://tinyurl.com/less-query */ .make-container(@min-width) { @media (min-width: @min-width) { .page-maker(@max-width) { .page { max-width: @max-width; .container-fixed(); } } .make-page-style() when (@min-width=@screen-lg-min) { .page-maker(@container-lg); } .make-page-style() when (@min-width=@screen-md) { .page-maker(@container-md); } .make-page-style() when (@min-width=@screen-sm) { .page-maker(@container-sm); } .make-page-style(); } } .make-container(@screen-sm); .make-container(@screen-md); .make-container(@screen-lg-min);

<强> HTML

... <body> <div class="page"> ... </div> ...

<强> OLD

您是否尝试过使用以下mixins（n是列数）：

.make-row() .make-lg-comun(n) .make-md-column(n) .make-xs-column(n)

这些mixin用于语义结构化页面。例如，如果您有以下标记：

<div class="main"> <div class="left"> </div> <div class="right"> </div> </div>

然后你可以做的更少：

.main{ .make-row(); } .left{ .make-lg-column(5); /* makes five large desktop column */ } .right{ .make-lg-column(7); }

如果这不是你想要的，或许更详细地说明你的意图，也许你不需要做很多媒体查询。

Answer 3

您可以使用父选择器：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table table-striped table-bordered" id="particulars_table">
  <thead>
    <tr>
      <td>Particular</td>
      <td>HSN</td>
      <td>Qty</td>
      <td>Rate</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody id="TextBoxContainer">
  </tbody>
  <tfoot>
    <tr>
      <th colspan="5">
        <button id="btnAdd" type="button" class="btn btn-sm btn-success w-100" data-toggle="tooltip" data-original-title="Add more Materials"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>
      </th>
    </tr>
  </tfoot>
</table>

输出：

  @screen-sm: 400;
  @screen-md: 800;
  @screen-lg-min: 1000;

  .responsive(@width-sm, @width-md, @width-lg) {
    @media (min-width: @screen-sm) {
      & {
        max-width: @width-sm;
      }
    }

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

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

  .container {
    .responsive(100px, 200px, 300px);
  }

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

3 个答案: