如何为@media和后代选择器声明相同的样式? [英] How to declare same style for @media and descendant selector?

问题描述

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

I need to define same style for elements under a media query and descendant by another class.

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

Perfect solution in LESS could be the following [pseudo-code]:

.foo
{
  color:red;

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

应该被编译为:

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

此语法不正确，但是，您有解决我问题的建议吗?

THIS SYNTAX IS INCORRECT but, do you have some suggestion to solve my problem?

推荐答案

由于 @ seven-phases-max 的建议，我终于找到了使用

Thanks to @seven-phases-max suggestion, I finally found a possible solution using 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;
    }
  );
}

此解决方案不仅仅提供其他选项，而且还提供其他选择:

This solution go beyond and offer other options:

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

• Possibility to set a custom value of screen width for media query,
• Pass MIN/MAX value of property used in media query (Try to pass "max" instead of "min" calling .MEDIAQUERY mixin)
• Toggling generation of simple media query or media query + descendant selector, through @only-media boolean.

这篇关于如何为@media和后代选择器声明相同的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！