在少使用类在媒体查询设置为混入(Using class set in media query as

我想重新使用一组设置媒体查询内侧，混入到整个网站，而不是在HTML中嵌入非语义类名使用类。

这里是我的问题的一个例子。

@media (min-width: 1000px) {

    .foo{width:120px;}
    .foo-2{width:150px;}
}
@media (max-width: 999px) {

    .foo{width:110px;}
    .foo-2{width:120px;}
}

.bar{.foo;}
.bar-2{.foo;}
.bar-3{.foo-2;}

在的.bar-X将永远不会得到应用的任何样式。我可以猜到，这是发生，因为LESS不会产生内部媒体查询的.bar-X，所以任何事都可以应用。

这是在不到一个错误，或者这是我永远无法实现？一种解决方法，这将是理想的。

你的问题是一个普遍的误解。 LESS不处理 @media查询，LESS完成工作后的浏览器。 LESS只能创建，浏览器会读取CSS代码 。所以@media是“毫无意义的”少，它就像任何其他的选择（ .someClass div table等），它只处理什么@media会投放给浏览器。

因此，这意味着你需要把所有的代码，对于改变@media在@media块。但你也不想一堆重复的代码。所以取而代之，创建一个主混入设置你的@media代码，然后调用从媒体的查询混入：

.makeFooGroup(@w1, @w2) {
    .foo {width: @w1}
    .foo-2{width: @w2}
    .bar{.foo}
    .bar-2{.foo}
    .bar-3{.foo-2}
}

@media (min-width: 1000px) {
    .makeFooGroup(120px, 150px);
}
@media (max-width: 999px) {
    .makeFooGroup(110px, 120px);
}

产生这个CSS：

@media (min-width: 1000px) {
  .foo {width: 120px;}
  .foo-2 {width: 150px;}
  .bar {width: 120px;}
  .bar-2 {width: 120px;}
  .bar-3 {width: 150px;}
}
@media (max-width: 999px) {
  .foo {width: 110px;}
  .foo-2 {width: 120px;}
  .bar {width: 110px;}
  .bar-2 {width: 110px;}
  .bar-3 {width: 120px;}
}

对于一些进一步的信息，我就少并给予@media与此相关的，请参阅：