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

Posted 2023-03-06

【中文标题】LESS：您可以将 CSS 选择器与媒体查询分组吗？

【英文标题】：LESS: Can you group a CSS selector with a media query?

【发布时间】：2012-11-30 09:34:44

【问题描述】：

我真的很高兴发现您可以创建一个可以轻松重用的媒体查询变量，并使您的代码更具可读性。

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

【问题讨论】：

您希望如何拥有这样的选择器：body.homepage, @media (min-width: 768px) and (max-width: 980px)？这不是有效的 CSS。

我意识到这一点。如果可以避免的话，我不想复制适用于特定类和断点的大块 CSS。

你唯一的选择是使用 mixin。

很高兴听到这并非不可能！ :) 你能详细说明或提供一个例子来说明它是如何工作的吗？

【参考方案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;