使用媒体查询中的类集作为更少的mixin答案

【问题标题】：Using class set in media query as mixin in less使用媒体查询中的类集作为更少的mixin
【发布时间】：2013-01-01 06:49:16
【问题描述】：

我正在尝试将媒体查询中设置的一组类作为 mixin 重用，以在整个网站中使用，而不是在 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 中的错误，还是我永远无法实现的？一个解决方法将是理想的。

【问题讨论】：

在媒体查询部分上方声明 .foo 怎么样，然后媒体查询将覆盖属性，它会下降到你的 bar-X 选择器？

标签： css less media-queries

【解决方案1】：

您的问题是一个常见的误解。 LESS 不处理@media 查询，浏览器在LESS 完成其工作后。 LESS 只能创建浏览器将要读取的 CSS 代码。所以@media 对 LESS 来说是“无意义的”，它就像任何其他选择器（.someClass div table 等）一样，它只处理 @media 将提供给浏览器的内容。

这意味着您需要将所有为@media 更改的代码放在@media 块中。但是你也不想要一堆重复的代码。因此，请创建一个主 mixin 来设置您的 @media 代码，然后从媒体查询中调用该 mixin：

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

有关我在 LESS 和 @media 上提供的与此相关的更多信息，请参阅：

【讨论】：

很好的答案，我现在就试试。我曾认为问题在于 LESS 对媒体查询并不“聪明”，并理解人们试图实现的目标。我希望 LESS 足够聪明，可以创建所有在媒体查询本身中引用媒体查询的语句，而用户不必这样做。
只要设置好它就可以完全按照我的意愿工作。我在“makeFooGroup”mixin 中添加了一些 mixin，以根据所需的参数动态创建宽度，这些参数完美地工作。唯一的缺点是每当我想设置网格时，它都需要在这个 mixin 主目录中完成，但这可以被视为一个积极的方面，因为它迫使所有主要的网格都在一个区域中可见。非常感谢。