css - 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 方法来完成这样的分组？

Answer 1

我不是 100% 确定您要获得的输出，但是这个 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;
  }
}