LESS：你能在媒体查询中组合CSS选择器吗？

Question

我非常喜欢发现可以创建媒体查询变量，这样可以轻松重用代码，使代码更易读。

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

我想知道是否可以将媒体查询与选择器分组。按照我的实现方式似乎无法正常工作，但我想问一下是否有可能。

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

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

我知道媒体查询与普通选择器不同，因为你必须在媒体查询内定义你的选择器，但是是否有一些神秘的 LESS 方法可以实现像这样分组呢？

- creativetim

---

你怎么能期望像这样使用选择器：body.homepage, @media (min-width: 768px) and (max-width: 980px)？这不是有效的CSS。 - cimmanon

我明白这一点。如果可能的话，我不想重复适用于特定类别和断点的大块CSS。 - creativetim

你唯一的选择是使用mixin。 - cimmanon

很高兴听到这不是不可能的！你能详细说明或提供一个例子吗？ - creativetim

Answer 1

我不确定你要的输出结果是什么，但是这个LESS只定义了一次颜色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;
  }
}

- ScottS