如何为@media 和后代选择器声明相同的样式？答案

【问题标题】：How to declare same style for @media and descendant selector?如何为@media 和后代选择器声明相同的样式？
【发布时间】：2015-01-09 13:22:02
【问题描述】：

我需要为媒体查询下的元素和另一个类的后代定义相同的样式。

LESS中的完美解决方案可能是以下[伪代码]：

.foo
{
  color:red;

  .example &,
  @media (min-width:800px)
  {
    color:blue;
  }
}

应该会被编译成：

.foo {
  color: red;
}
.example .foo {
  color: blue;
}
@media (min-width: 800px) {
  .foo {
    color: blue;
  }
}

此语法不正确，但是您有什么建议可以解决我的问题吗？

【问题讨论】：

标签： less mixins less-mixins

【解决方案1】：

感谢@seven-phases-max的建议，我终于找到了使用Detached Ruleset的可能解决方案：

@screen-xs: 480px;
@screen-sm: 769px;
@screen-md: 992px;
@screen-lg: 1200px;

.MEDIAQUERY(@only-media, @min-max, @size, @RULES) 
{
  @screen-width:~"@{screen-@{size}}";

  @mediaQuery: ~"screen and (@{min-max}-width: @{screen-width})";

  @media @mediaQuery { @RULES(); }

  & when (@only-media = false) {
    .@{size} &       { @RULES(); }  
  }
}

.foo_media-and-class
{
  color:red;

  .MEDIAQUERY(@only-media:false, @min-max:max, @size:md,
    { 
        color:blue;
    }
  );

  .MEDIAQUERY(@only-media:false,  @min-max:min, @size:lg,
    { 
        color:yellow;
    }
  );
}

.foo_only-media
{
  color:red;

  .MEDIAQUERY(@only-media:true,  @min-max:max, @size:md,
    { 
        color:blue;
    }
  );

  .MEDIAQUERY(@only-media:true,  @min-max:min, @size:lg,
    { 
        color:yellow;
    }
  );
}

此解决方案超越并提供其他选项：

可以为媒体查询设置自定义屏幕宽度值，
传递MIN/MAX媒体查询中使用的属性值（尝试传递“max”而不是“min”调用.MEDIAQUERY mixin）
通过@only-media boolean 切换简单媒体查询或媒体查询+后代选择器的生成。

【讨论】：

【解决方案2】：

不，选择器和 @media 查询是完全不同的语言实体（尽管具有相似的 {} 语法），因此您不能像示例中那样将它们与逗号组合。

因此，要使其干燥（假设共享样式当然具有多个属性），您将需要一个 mixin（或某种），例如：

.foo {
    color: red;
    .somename() {
        color: blue;
    }

    .example &                {.somename}
    @media (min-width: 800px) {.somename}
}

另请参阅Passing Rulesets to Mixins 示例（如果您需要更通用的解决方案）。

【讨论】：

【解决方案3】：

我认为您的逗号可能会导致错误。

.foo {
   color:red;
   .example & {
   color:blue;
     @media (min-width:800px) {
      color:blue;
     }
   }
}

这是输出以下内容的正确语法：

.foo {
  color: red;
}
.example .foo {
  color:blue;
}
 @media (min-width:800px) {
  .example .foo {
    color:blue;
   }
}

【讨论】：

嗨 Aibrean，您的解决方案并不完全是我所需要的，事实上您在媒体查询中得到了 .example .foo，而我想要的输出与您在我的问题中看到的略有不同