5

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

4

1 回答 1

10

你的问题是一个常见的误解。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与此相关的更多信息，请参阅：

  1. CSS 预处理器，可以在 @media 查询中定义变量
  2. 媒体查询分组而不是匹配的多个分散的媒体查询
于 2013-01-18T01:55:42.797 回答