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

LESS：你可以将CSS选择器与媒体查询分组吗？

1 个答案: