如何获取SASS嵌套嵌套媒体查询以使用媒体查询或运算符 [英] How to get a SASS nested nested media query to work with the use of the media query or operator

问题描述

我想获得嵌套的IE10 +媒体查询在SASS中工作，我不理解输出。我认为使用媒体查询或运算符，变得很奇怪。因此，此查询将不适用于所有情况，因为输出的唯一的东西是或的一侧。

I am trying to get a nested IE10+ media query to work in SASS and am not understanding the output. I think that things are getting weird with the use of the media query or operator ,. As a result, this query will not apply in all cases because the only thing that is outputted is one side of the or.

请注意，这些是最初的混音;我删除了mixins，使事情更容易调试

Note that these are originally mixins; i removed the mixins to make things easier to debug

.element {
  @media only screen and (min-width: 825px) and (max-width: 999px) {
    font-size: 10.4vw;

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      font-size: 9.6vw;
    }
  }
}

p>

Compiles to this:

@media only screen and (min-width: 825px) and (max-width: 999px) {
  .element {
    font-size: 10.4vw;
  }
}
@media only screen and (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: active) {
  .element {
    font-size: 9.6vw;
  }
}

预期结果是：

@media all and (-ms-high-contrast: none) and (min-width: 825px) and (max-width: 999px), (-ms-high-contrast: active) and (min-width: 825px) and (max-width: 999px) {
  .element {
    font-size: 9.6vw;
  }
}

推荐答案

Sass处理嵌套结合逗号分隔的媒体查询没有问题...直到您开始在内部和外部查询上指定显示类型：

Sass handles nesting combined with comma delimited media queries without problems... until you start specifying a display type on both the inner and outer query:

/* without `screen` */
.foo {
    @media (min-width: 20em) {
        color: yellow;

        @media all and (max-width: 40em), (orientation: portrait) {
            color: green;
        }
    }
}

/* without `only` */
.bar {
    @media screen and (min-width: 20em) {
        color: yellow;

        @media all and (max-width: 40em), (orientation: portrait) {
            color: green;
        }
    }
}

/* with `only screen` */
.buzz {
    @media only screen and (min-width: 20em) {
        color: red;

        @media all and (max-width: 40em) {
            color: blue;
        }
    }
}

输出：

/* without `screen` */
@media (min-width: 20em) {
  .foo {
    color: yellow;
  }
}
@media all and (min-width: 20em) and (max-width: 40em), (min-width: 20em) and (orientation: portrait) {
  .foo {
    color: green;
  }
}

/* without `only` */
@media screen and (min-width: 20em) {
  .bar {
    color: yellow;
  }
}
@media screen and (min-width: 20em) and (orientation: portrait) {
  .bar {
    color: green;
  }
}

/* with `only screen` */
@media only screen and (min-width: 20em) {
  .buzz {
    color: red;
  }
}

在内部和外部查询都包含一个显示类型（全部，屏幕），编译结果不正确匹配什么写的。这似乎是一个Sass试图写一个类似于有效的媒体查询（因为它知道屏幕和所有无效）的情况。

In both cases where both the inner and outer query contains a display type (all, screen), the compiled results do not correctly match what was written. This appears to be a case of Sass trying to write something that resembles a valid media query (since it knows that screen and all is not valid).

因此只需指定一次显示类型。

So only specify the display type once.

.element {
  @media (min-width: 825px) and (max-width: 999px) {
    font-size: 10.4vw;

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      font-size: 9.6vw;
    }
  }
}

编译为：

@media (min-width: 825px) and (max-width: 999px) {
  .element {
    font-size: 10.4vw;
  }
}
@media all and (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: none), (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: active) {
  .element {
    font-size: 9.6vw;
  }
}

这篇关于如何获取SASS嵌套嵌套媒体查询以使用媒体查询或运算符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！