less.js 🚀 - 分组媒体查询

您如何在不通过重新组织语句而潜在地改变含义的情况下做到这一点？

lukeapage 于 2012-09-11

我不认为这些含义可以改变。这与折叠普通冗余标签完全相同。例如：

body {
    background: white;
}

body {
    padding: 0;
    margin: 0;
}

将折叠为：

body {
    background: white;
    padding: 0;
    margin: 0;
}

媒体查询更是如此，因为它们是特殊的顶级选择器，充当普通元素选择器之上的控制层。基本上，它们只有一个含义，不受文件中其余 css 的影响。

此外，less 已经维护了冒泡媒体查询的顺序，它只是为完全相同的查询创建了许多冗余选择器。如果它们可以在处理结束时被缓冲并写入单个查询，它会更整洁，生产者更小的 css 输出。

Soviut 于 2012-09-11

媒体查询中选择器复杂性的规则是什么？做
查询会提高复杂性并覆盖任何排序？你能指点任何
眼镜？

lukeapage 于 2012-09-11

基本上，是的。媒体选择器就像 IF 语句，它环绕着正常的样式规则，并且仅在满足查询条件时才适用。例如，如果浏览器的宽度小于一定数量的像素，则查询中的规则将被打开并覆盖现有规则。

因此，有许多具有单一样式的相同查询，每个查询在功能上都与包含所有样式的查询相同。只要查询是一样的。

Soviut 于 2012-09-11

这是 Mozilla 的一些文档

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Soviut 于 2012-09-11

我的意思是在这个例子中.. div 变成红色 - 意味着重新排序媒体查询（都用于屏幕）会改变 css 的含义

<strong i="6">@media</strong> screen {
    div {
        background-color: green;
    }
}

div {
     background-color: red;
}

<strong i="7">@media</strong> screen {
    div.pink {
        background-color: pink;
    }
}

lukeapage 于 2012-09-11

只有当规则集直接相互遵循时，它才应该合并。

cloudhead 于 2012-09-11

他们在@Soviut原始示例中没有，因此在 IMO 中限制使用此功能请求

lukeapage 于 2012-09-11

我同意，但我不明白这将如何应用于冒泡媒体查询？请记住，冒泡查询是一种语法糖；您通常不能在另一个选择器中嵌入媒体查询。因此，可以安全地假设任何时候遇到冒泡查询时，都会按照它们到达的顺序将其与相同的冒泡查询分组。

Soviut 于 2012-09-12

如果您有两个相邻的冒泡媒体查询可以组合，我认为这样做是很明显的。让他们分开的少？

lukeapage 于 2012-10-18

在处理视网膜图像时，我们将复杂的媒体查询包装在一个 mixin 中并创建了 sprite mixin，所以我们到处都有这个……它增加了输出 CSS，但更易于维护。

例如，这是我们的精灵混合：

.sprite(<strong i="7">@spritePath</strong>, <strong i="8">@hdpiPath</strong>, <strong i="9">@x</strong>, <strong i="10">@y</strong>, <strong i="11">@size</strong>: auto) {
    background-image: url(@spritePath);  
    background-repeat: no-repeat;
    background-position: -1 * <strong i="12">@x</strong> -1 * @y; // Negativize the value
    .background-size(@size);
    <strong i="13">@media</strong> <strong i="14">@mediaRetina</strong> {
        background-image: url(@hdpiPath);
    }
}

@mediaRetina在哪里：

<strong i="19">@mediaRetina</strong>: ~"only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx)";

然后在下面，我们创建更多的 mixin 来像这样包装每个 sprite 元素：

#sprite
{
    .header-logo()
    {
        .sprite(<strong i="23">@globalSpritePath</strong>, <strong i="24">@global2XSpritePath</strong>, 22px, 0, 384px 288px);
        width: 94px;
        height: 59px;
    }
}

并在其他 LESS 文件中使用它，如下所示：

h1 {
    width: 94px;
    height: 59px;

    a {
        #sprite > .header-logo();
    }

}

在这种情况下，生成的 CSS 如下所示：

h1 a {
  background-image: url("/images/sprite-global.png");
  background-repeat: no-repeat;
  background-position: -22px 0;
  -webkit-background-size: 384px 288px;
  -moz-background-size: 384px 288px;
  -o-background-size: 384px 288px;
  background-size: 384px 288px;
  width: 94px;
  height: 59px;
}
<strong i="31">@media</strong> only screen and (-webkit-min-device-pixel-ratio: 1.3), 
       only screen and (min--moz-device-pixel-ratio: 1.3), 
       only screen and (-o-min-device-pixel-ratio: 4/3), 
       only screen and (min-device-pixel-ratio: 1.3), 
       only screen and (min-resolution: 124dpi), 
       only screen and (min-resolution: 1.3dppx) {
  h1 a {
    background-image: url("/images/[email protected]");
  }
}

现在想象这个案例被重复了很多次。如果没有分组，减轻这种额外重量的唯一方法是将每个 Retina 样式移动到一个专用的 LESS 文件中，这可能适用于小型站点，但对于大型站点来说是不现实的。

这是将它们分组并将它们分开的地方，特别是如果您有一个包含很多模块的大型站点（例如我们的）。

不过，我知道您对覆盖样式的意思是什么，而且我不确定您是否可以安全地实现这个确切的功能，而不会干扰设计人员可能想要的级联。

对我来说，这听起来更像是能够定义一个“部分”（占位符），然后定义要放置在其中的样式，无论它们的编写顺序如何。这在服务器端模板中很常见，其中您有一个“脚本”或“头部”部分，然后您的页面可以在加载时将内容注入其中。

所以，我希望能够在一个 LESS 文件中做到这一点：

<strong i="39">@media</strong> { // retina query
    @renderSection("retina")
}

// in another file
h1 {
    <strong i="40">@section</strong> retina {
        // retina styles
    }
}

@section将在编译时替换为当前选择器。

所以，我的精灵混合将变成：

.sprite(<strong i="46">@spritePath</strong>, <strong i="47">@hdpiPath</strong>, <strong i="48">@x</strong>, <strong i="49">@y</strong>, <strong i="50">@size</strong>: auto) {
    background-image: url(@spritePath);  
    background-repeat: no-repeat;
    background-position: -1 * <strong i="51">@x</strong> -1 * @y; // Negativize the value
    .background-size(@size);
    <strong i="52">@section</strong> retina {
        background-image: url(@hdpiPath);
    }
}

它不需要是这种语法（或实现），我将它建立在 ASP.NET Razor 语法的基础上，因为这是我熟悉的并且我喜欢这种语法。

kamranayub 于 2012-10-23

这是一个很好的例子..也是一个很好的用例..你可以做

@media-section

（或媒体组），然后它会告诉 less 将媒体组合在一起（如果它已经存在，可以选择将其合并到媒体查询中，这将允许您将规则拉到您想要放置它们的任何位置）..也许就是这样你是什么意思？

我很想认为这是一个好主意（而且实施起来并不难）

lukeapage 于 2012-10-24

👍1

+1 @media-group

Soviut 于 2012-10-24

+1 @media-group

Leegorous 于 2013-01-16

另一种选择是有一个全局选项来分组真/假。

lukeapage 于 2013-03-22

嗯，这可能是个好主意。是否有任何情况需要选择性分组？

我认为在大多数情况下，人们只是希望他们的媒体查询更紧凑，因此现在可能是全局选项。如果有人声称需要选择性分组，则可以稍后添加新关键字。

+1 表示全局分组选项。

Soviut 于 2013-03-22

是的..因为我们看到@import添加多个关键字不是可行的方法，并且添加选项的争议较小。

lukeapage 于 2013-03-22

我会说添加该选项，因为它会立即有用，并且如果它被创建，它将能够作为覆盖与选择性导入共存。

Soviut 于 2013-03-22

您好，我刚看到这个问题，想分享一个我在需要对媒体查询进行分组时制作的小应用程序。这不是一个完成的应用程序。更像是对未来工具的一些研究。所以我只想向您展示这个想法，因为我真的认为这是必须实施的。（可能存在错误和其他问题）但我已经用我的上一个项目进行了测试，其中包括 twitter bootstrap 并且它可以正常工作。（规则顺序没问题）让我知道；）

http://mqhelper.nokturnalapp.com

AoDev 于 2013-04-17

你好！

有人分配到这个吗？这是一个很棒的功能，当使用 less 创建时，它对于减少 css 文件非常有用。通过这种方式，开发人员可以更轻松地使用所有这些 @mq。

AllanStepps-old-account 于 2013-04-29

@AoDev mqhelper 绝对是朝着正确方向迈出的一步，我认为它目前作为 CSS linting 过程的一部分很有用。我认为它只需要从演示中的前端内容中提取核心功能。

DaveKin 于 2013-04-30

是的，但我的应用程序的目标不是成为某些“真正工具”的一部分。我刚刚看到很多人在这里想知道分组媒体查询是否可能是一个问题，并想表明它可以做到。如果开发人员想要有一个想法并使用它的一部分，那么代码就在那里。但如果你愿意，我可以把它变成一个“真正的”模块:)

AoDev 于 2013-04-30

我已经搞定了，这是一项很好的工作，谢谢。

DaveKin 于 2013-04-30

@Soviut @lukeapage我认为选择性分组最有意义。全有或全无破坏试图维持级联。应该类似于扩展，或者可能从字面上添加组关键字。像这样的语法会很棒：

<strong i="8">@tablet</strong>: (max-width: 979px);

.a {
  color: yellow;
  <strong i="9">@media</strong> <strong i="10">@tablet</strong> group {
    color: red;
  }
}
.b {
  background: black;
  <strong i="11">@media</strong> <strong i="12">@tablet</strong> group {
    background: white;
  }
}

//output
.a { color: yellow; }
.b { background: black; }
<strong i="13">@media</strong> (max-width: 979px) {
  .a { color: red; }
  .b { background: white; }
}

matthew-dean 于 2013-05-01

您好，媒体查询分组将是一个非常好的补充。与此同时，我提出了这个想法，我想知道它是否可以与即将到来的:extend功能一起使用以避免重复属性：

// Define the media queries
<strong i="7">@step1</strong>: ~"only screen and (max-width: 960px)";
<strong i="8">@step2</strong>: ~"only screen and (min-width: 961px)";

// Default empty mixins
.step1() {}
.step2() {}

// Custom styles
.test { color: blue; }

// Change the style in the media queries
.step1() {
  .test { color: red; }
}

.step2() {
  .test { color: green; }
}

// Finally render the media queries
<strong i="9">@media</strong> <strong i="10">@step1</strong> { .step1(); }
<strong i="11">@media</strong> <strong i="12">@step2</strong> { .step2(); }

gyopiazza 于 2013-05-10

@AoDev创建的工具非常适合展示“全有或全无”方法的重要性。媒体查询的分组不会遭受与分组/重新排序样式相同的副作用。任何人都可以提供一个真实世界的例子（针对@AoDev 创建的工具进行测试）来说明全有或全无方法是如何存在缺陷的？

DesignByOnyx 于 2013-05-28

@kamranayub完美地解释了我正在处理的确切情况。就个人而言，我很想看到这种实现的某种形式。 @DesignByOnyx ，下面的测试代码不能用@AoDev的工具正确编译。我更喜欢像 kamranayub 提到的那样做这种样式。在较大的站点上处理多个较少的文件时，它会更清晰。

.footer ul {

  margin: 10px;

  <strong i="9">@media</strong> @layout-tablet, @layout-full {
    font-size: 13px;
    font-weight: bold;
  }
  <strong i="10">@media</strong> @layout-mobile {
    font-size: 10px;
    padding-left: 10px;
  }

  li {

    background: black;
    color: white;
    padding: 10px;

    <strong i="11">@media</strong> @layout-tablet, @layout-full { .border-radius(@radius) }
    <strong i="12">@media</strong> @layout-mobile { .border-radius(@radius-mobile) }   
  }

}

pmacom 于 2013-07-02

它不起作用，因为您使用的语法较少。这是为了工作
使用 CSS。
2013 年 7 月 2 日晚上 9:19，“P Macom”通知@ github.com 写道：

@kamranayub https://github.com/kamranayub完美地解释了确切的
我正在处理的情况。就个人而言，我很想看到某种形式
这个实现。 @DesignByOnyx https://github.com/DesignByOnyx ，
下面的测试代码不能正确编译@A oDevhttps://github.com/AoDev的
工具。我更喜欢像 kamranayub 提到的那样做这种样式。
在较大的站点上处理多个较少的文件时，它会更清晰。
.footer ul {
边距：10px；
@media @layout-tablet，@layout-full {
字体大小：13px；
字体粗细：粗体；
}
@media @layout-mobile {
字体大小：10px；
左边距：10px；
}
李{
background: black;
color: white;
padding: 10px;

@media @layout-tablet, @layout-full { .border-radius(@radius) }
@media @layout-mobile { .border-radius(@radius-mobile) }
}
}
—
直接回复本邮件或在Gi tHub上查看
.

AoDev 于 2013-07-02

建议在 LESS 处理后运行@AoDev的工具使用的逻辑吗？我想不出一个情况，这不是我想要的。

kamranayub 于 2013-07-02

建议在 LESS 处理后运行@AoDev的工具使用的逻辑吗？我想不出一个情况，这不是我想要的。

kamranayub 于 2013-07-02

我认为这是临时的一个选项，我会考虑将@AoDev的解决方案包装在 grunt.js 模块中，以便它可以在处理 LESS 后自动运行（这是基于预处理正在进行的假设在部署之前完成，而不是即时完成）

DaveKin 于 2013-07-05

一个 grunt 任务在此期间肯定会很好，并且对原始 CSS 普遍有用。然而，考虑到@media magic LESS 已经做了多少，分组选项似乎合乎逻辑。

再说一次，对于那些喜欢动态加载移动样式表的人来说，Grunt 任务可能能够将媒体查询完全分离到他们自己的文件中。

Soviut 于 2013-07-05

既然您提到了它，分离样式表是一个有用的选项 - 目前您需要专门构建源文件来做到这一点。

也许这里有一个单独的媒体查询优化器工具来分组和选择性地拆分媒体查询？

DaveKin 于 2013-07-05

绝对地。我不确定 CSSO 是否已经这样做了，作为我所知道的唯一一个 CSS 重写器，它也有一个与之相关的 Grunt 任务。但即使它也无法将媒体查询之类的内容拆分为单独的文件。同样，它的重写非常基础，基于相同的选择器和属性，而不是 DOM 结构。

Soviut 于 2013-07-05

Mqhelper 已经为您提供了单独的媒体查询，请查看 github
页面了解更多详情。可以从那里构建分离的 css 文件。
2013 年 7 月 5 日上午 10:08，“Soviut”通知@github.com 写道：

绝对地。我不确定 CSSO 是否已经这样做了，因为它是唯一的 CSS
我知道重写器也有一个与之相关的 Grunt 任务。但即使
它无法将媒体查询之类的内容拆分为单独的文件。相似地，
它的重写非常基础，基于相同的选择器和属性，
与 DOM 结构相反。
—
直接回复本邮件或在Gi tHub上查看
.

AoDev 于 2013-07-05

这听起来像是在短期内有用并且不太难的东西
（分组选项和单独的文件选项）如果你们中的一个人愿意
喜欢实施我可以给你帮助...

lukeapage 于 2013-07-06

我不想阻止朝着某种类型的“部分”或“组”想法来实现这一点（我认为这很好）。但是，如果有人希望能够在为常规 css 定义的代码中定义@media属性信息，但将其分组在代码中其他地方的单个@media查询中，则有目前至少可以通过 LESS 功能完成两种方式，可以很好地控制放置，但不可否认的是，在建议的解决方案所需的内容之上有一些额外的编码（因此，无论如何，请继续努力）。考虑：

<strong i="8">@media</strong> screen {
  .my-class > .mediaScreen();
  #screenSpace1(screen);
  #screenSpace2(screen);
}

//technique #1 only works for a top level class or id that can act as a namespace
//and would not handle a deep nesting very well
.my-class {
  regular-property: value;

  .mediaScreen(<strong i="9">@selectorString</strong>: ~'.my-class') { //full path needs repeat here if deeply nested
    @{selectorString} {
      media-screen-property: value;
    }
  }
}

//technique #2 allows for tag selectors and easier deeper nesting 
#screenSpace1(<strong i="10">@place</strong>: noMedia) {
  div > ul {
    .setProps() when (<strong i="11">@place</strong> = noMedia) {
       regular-property: value;
    }
    .setProps() when (<strong i="12">@place</strong> = screen) {
       screen-property: value;
    }
    .setProps();

    li {
       .setProps() when (<strong i="13">@place</strong> = noMedia) {
          regular-property: value;
          &:hover { regular-property: value; }
       }
       .setProps() when (<strong i="14">@place</strong> = screen) {
          screen-property: value;
          &:hover { screen-property: value; }
        }
       .setProps();
    }
  }
}
#screenSpace1();

.more-classes-not-needing-media {property: value;}

#screenSpace2(<strong i="15">@place</strong>: noMedia) {
  .someClass {
    .setProps() when (<strong i="16">@place</strong> = noMedia) {
       regular-property: value;
    }
    .setProps() when (<strong i="17">@place</strong> = screen) {
       screen-property: value;
    }
    .setProps();

    > a {
       .setProps() when (<strong i="18">@place</strong> = noMedia) {
          regular-property: value;
          &:hover { regular-property: value; }
       }
       .setProps() when (<strong i="19">@place</strong> = screen) {
          screen-property: value;
          &:hover { screen-property: value; }
        }
       .setProps();
    }
  }
}
#screenSpace2();

产生这个css：

<strong i="23">@media</strong> screen {
  .my-class {
    media-screen-property: value;
  }
  div > ul {
    screen-property: value;
  }
  div > ul li {
    screen-property: value;
  }
  div > ul li:hover {
    screen-property: value;
  }
  .someClass {
    screen-property: value;
  }
  .someClass > a {
    screen-property: value;
  }
  .someClass > a:hover {
    screen-property: value;
  }
}
.my-class {
  regular-property: value;
}
div > ul {
  regular-property: value;
}
div > ul li {
  regular-property: value;
}
div > ul li:hover {
  regular-property: value;
}
.more-classes-not-needing-media {
  property: value;
}
.someClass {
  regular-property: value;
}
.someClass > a {
  regular-property: value;
}
.someClass > a:hover {
  regular-property: value;
}

scottgit 于 2013-07-10

我一直想做这样的事情：

/*
 * Span mixins
 * adapted from Gridpak Beta LESS
 * http://gridpak.com/
 * Created by <strong i="6">@erskinedesign</strong>
 */

.mixin-span(<strong i="7">@num</strong>, <strong i="8">@gutter_pc</strong>, <strong i="9">@padding</strong>, @max_columns) when (<strong i="10">@num</strong> > @max_columns) {
    .mixin-span(<strong i="11">@max_columns</strong>, <strong i="12">@gutter_pc</strong>, <strong i="13">@padding</strong>, @max_columns);
}
.mixin-span(<strong i="14">@num</strong>, <strong i="15">@gutter_pc</strong>, <strong i="16">@padding</strong>, @max_columns) when (<strong i="17">@num</strong> =< @max_columns) {
    <strong i="18">@one_col</strong>: (100% - (<strong i="19">@gutter_pc</strong> * (<strong i="20">@max_columns</strong> - 1))) / @max_columns;
    width:(<strong i="21">@one_col</strong> * @num) + (<strong i="22">@gutter_pc</strong> * (<strong i="23">@num</strong> - 1));
    padding:@padding;
    margin-left:@gutter_pc;
}
.mixin-span_first() {
    margin-left:0;
}

// end of adapted Gridpak LESS

// Namespaced mixin sets

#mob{
    <strong i="24">@max_columns</strong>: 1;
    <strong i="25">@padding</strong>: 0 1.5%;
    <strong i="26">@gutter_pc</strong>: 5%;

    .span(@col){
        <strong i="27">@media</strong> screen and (max-width:300px){
            .mixin-span(<strong i="28">@col</strong>, <strong i="29">@gutter_pc</strong>, <strong i="30">@padding</strong>, @max_columns);
            .mixin-span_first;
        }
    }
}

#desk{
    <strong i="31">@max_columns</strong>: 10;
    <strong i="32">@padding</strong>: 0 3%;
    <strong i="33">@gutter_pc</strong>: 5%;

    .span(@col){
        <strong i="34">@media</strong> screen and (min-width:301px){
            .mixin-span(<strong i="35">@col</strong>, <strong i="36">@gutter_pc</strong>, <strong i="37">@padding</strong>, @max_columns);
        }
    }
}

//assign different layouts per namespaced breakpoint
/* ----- Header ----- */
#header{
    #mob > .span(2);
    #desk > .span(4);
    .mixin-span_first;
    background-color:#888;
    color:#fff;
}

/* ----- Main ----- */
#main{
    #mob > .span(1);
    #desk > .span(6);
    background-color:#eee;
    color:#111;
}

但是没有分组，生成的css有点笨重

/* ----- Header ----- */
#header {
  margin-left: 0;
  background-color: #888;
  color: #fff;
}
<strong i="41">@media</strong> screen and (max-width: 300px) {
  #header {
    width: 100%;
    padding: 0 1.5%;
    margin-left: 5%;
    margin-left: 0;
  }
}
<strong i="42">@media</strong> screen and (min-width: 301px) {
  #header {
    width: 37%;
    padding: 0 3%;
    margin-left: 5%;
  }
}
/* ----- Main ----- */
#main {
  background-color: #eee;
  color: #111;
}
<strong i="43">@media</strong> screen and (max-width: 300px) {
  #main {
    width: 100%;
    padding: 0 1.5%;
    margin-left: 5%;
    margin-left: 0;
  }
}
<strong i="44">@media</strong> screen and (min-width: 301px) {
  #main {
    width: 58%;
    padding: 0 3%;
    margin-left: 5%;
  }
}

DaveKin 于 2013-07-10

这个https://github.com/buildingblocks/grunt-combine-media-queries有一个解决方案，但是它目前只按最小宽度排序，因此主要用于移动优先站点。

JohnCashmore 于 2013-07-26

IMO 将问题概括为范围分组控制是有意义的，这将为问题 #930 提供解决方案

danielkatz 于 2013-08-04

👍1

https://github.com/Se7enSky/group-css-media-queries

ivankravchenko 于 2013-10-30

很棒的工具@krava ！谢谢

FranckErnewein 于 2013-11-06

优秀！！！ IMO 在 LESS 上实现 KRAVA 的功能很有意义

NunoBentes 于 2014-01-07

+1

FrankFang 于 2014-01-23

我想把它作为插件来做。应该不会太难。太多了！

lukeapage 于 2014-01-23

我认为插件的优先级应该低于让系统自动加载插件（options.json）。但是是的，插件作为附加功能是有意义的。

matthew-dean 于 2014-01-23

这个选项已经实施了吗？
当我在组件中使用媒体查询时，这可能会将我输出的 css 减少一半，并且很高兴将它们在输出阶段分组。

关于选择器重新排序，如果您使用“组”关键字对某些内容进行分组，您会意识到它将从当前逻辑流中删除并放置在分组区域中。

hitautodestruct 于 2014-03-24

http://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/
根据这篇文章，没有必要对媒体查询进行分组。
但是插件很好。

FrankFang 于 2014-03-25

与其说是性能问题，不如说是生成的 CSS 文件的大小。就 CSS 文件大小而言，数十个@media screen and (max-width: 480px)字符串开始增加。

Soviut 于 2014-03-25

我在 SO 上问过这个问题，有人对这个问题给出了部分答案。

hitautodestruct 于 2014-03-25

@seven-phases-max 给了你答案，并在他的回答中提到了这个问题。非常元;)

Soviut 于 2014-03-25

我绝对更喜欢 mixin 方法来合并媒体查询，而不是对它们进行后期处理。这允许更轻松地输入并更好地控制合并的内容和方式。

在评论中，您可以看到我在所有项目中使用的解决方案：
https://github.com/less/less.js/issues/950#issuecomment -17723748

gyopiazza 于 2014-03-25

我刚刚搜索了一下，发现了两个可以进行媒体查询分组的 grunt 插件：

https://github.com/buildingblocks/grunt-combine-media-queries

https://github.com/Se7enSky/grunt-group-css-media-queries

Soviut 于 2014-03-25

组合媒体查询也可用于gulp 。
http://github.com/konitter/gulp-combine-media-queries

hitautodestruct 于 2014-03-25

由于 v2 您可以使用插件，因此请参阅https://github.com/bassjobsen/less-plugin-group-css-media-queries （和 https://github.com/bassjobsen/less-plugin-pleeease）

bassjobsen 于 2015-01-19

关闭，因为这是由插件支持的，并且不是进入核心的优先事项（AFAIK - 如果这是错误的，@less/admin 是正确的）。

matthew-dean 于 2015-01-20

👎2

@gypiazza我有一个关于https://github.com/less/less.js/issues/950#issuecomment -17723748 以上的问题：为什么需要初始化 mixin？我的意思是，CSS 在没有 init 的情况下编译。我想我正在尝试了解最佳实践和用法。

nfq 于 2015-05-18

@nfq这不是初始化，而只是“默认”空定义。如果您不提供自定义的.step*() mixins（即假设您可能在不同的文件中有这些东西，例如“默认” .step*()定义和它们的渲染是一些通用的，则这是必要的）实用程序/库代码，而自定义.step*()定义在您的主题/项目特定代码中）。

seven-phases-max 于 2015-05-19

@nfq实际上没有必要。
正如@seven-phases-max 所提到的，如果您不在代码中使用mixin，避免错误很有用，因为媒体查询将调用不存在的mixin。

顺便说一句，这种技术的优点是组合媒体查询会减慢编译时间（有点）。

gyopiazza 于 2015-05-19

@gyopiazza感谢您的快速回复。我不介意编译时间，对于大型项目，我绝对更喜欢将所有媒体查询分组在主样式表的底部。我尝试了一些插件，但发现您的方式对我们的用例来说是最简单和最方便的。谢谢！！

nfq 于 2015-05-19

@seven-phases-max 谢谢，你的回答很有道理。我用的少了很多，但还没有理解实现某些事情的最佳方式！

nfq 于 2015-05-19

请注意，从 v3 开始，clean-css 也支持@media合并， less-plugin-clean-css 也是如此

与 main.less：

header {
    color: green;

    <strong i="9">@media</strong> only screen (max-width: 500px) { color: red; }
}

footer {
    color: green;

    <strong i="10">@media</strong> only screen (max-width: 500px) { color: red; }
}

lessc --clean-css="advanced" main.less输出：
footer,header{color:green}@media only screen (max-width:500px){footer,header{color:red}}

默认情况下，less-plugin-clean-css 将 --skip-advanced 设置为 true，您应该为@media合并显式设置advanced选项

bassjobsen 于 2015-05-19

@nfq使用“混合方法”媒体查询仍然编译在底部（或您声明它们的任何地方）。

gyopiazza 于 2015-05-19

@gyopiazza谢谢，是的。对这种方法很满意！！

@bassjobsen我肯定会在更大的项目中使用它。我还没有真正开始使用 Less 插件。感谢您的提示！

nfq 于 2015-05-20

Less.js: 分组媒体查询

所有64条评论

相关问题