LESS：你组一个CSS选择与媒体查询可以？(LESS: Can you group a CSS s

我真的很喜欢找出你可以创建一个媒体查询变量，你可以轻松地重复使用，使你的代码更易读。

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
@media @tablet { ... }

我想知道是否有可能组媒体查询与选择。 它似乎没有工作，我实现它的方式，但我认为我会问，看看它甚至有可能。

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
  aside { ... }

  &.homepage,
  @media @tablet {
    aside { ... }
  }
}

据我所知，媒体查询从运行的设施，工厂选择不同的，因为你必须定义媒体查询里面你选择，但有一些巫术来完成这样的分组更低的方式？

Answer 1:

我不是100％确定你要为输出，但这仅少定义颜色red一次，它适用于：

@tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
  aside { color: blue }

  &.homepage {
    aside { color: red }
  }

  @media @tablet {
    .homepage;
  }
}

产生这个CSS：

body aside {
  color: #0000ff;
}
body.homepage aside {
  color: #ff0000;
}
@media (min-width: 768px) and (max-width: 980px) {
  body aside {
    color: #ff0000;
  }
}

文章来源: LESS: Can you group a CSS selector with a media query?