4

使用 LESS 的 Mixin 非常简单：

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

  // ...
}
4

3 回答 3

6

只需简单地添加： -

.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);
于 2013-09-02T06:00:25.917 回答
2

编辑

查看这两个答案（媒体查询中的类集，媒体查询分组），我觉得它们与您的问题密切相关。看着第二个答案，我试图把一些东西放在一起。片段如下，但您也可以看到我放在一起的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>
...

老的

您是否尝试过使用以下混合（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);
}

如果这不是您想要的，也许可以详细说明您的意图，也许您不需要做很多媒体查询。

于 2013-09-01T23:57:27.913 回答
0

您可以使用父选择器：

  @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 (min-width: 400) {
  .container {
    max-width: 100px;
  }
}
@media (min-width: 800) {
  .container {
    max-width: 200px;
  }
}
@media (min-width: 1000) {
  .container {
    max-width: 300px;
  }
}
于 2020-07-09T15:55:20.687 回答