css - @media 里面的 @media 和糟糕的 SASS 解析

Question

我有以下 sass:

.branded
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
    @media screen and (orientation:portrait)
      background-image: url("../img/fbc/citroen_640x960.jpg")
    @media screen and (orientation:landscape)
      background-image: url("../img/fbc/citroen_960x640.jpg")
    background-size: 50%

它被解析成下面的CSS:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .branded {
        background-size: 50%;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and screen and (orientation:portrait) {
    .branded {
        background-image: url("../img/fbc/citroen_640x960.jpg");
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and screen and (orientation:landscape) {
    .branded {
        background-image: url("../img/fbc/citroen_960x640.jpg");
    }
}

我发现它不工作，我在这一行收到错误:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and screen and (orientation:landscape) {

为什么会这样，SASS 解析器为什么会创建错误的 CSS？是我的错还是SASS？

Answer 1

我也不认为在标准 CSS 中混合 @media 是可能的，但是 nesting in SASS是可能的。

我可能错了，但我认为错误可能来自混合:@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen 和 (min-device-pixel-ratio: 2) 和 screen 和 (orientation:landscape)

试试这个？

.branded
  @media only screen
    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
      background-size: 50%
      @media (orientation:portrait)
        background: url("../img/fbc/citroen_640x960.jpg")
      @media (orientation:landscape)
        background: url("../img/fbc/citroen_960x640.jpg")