Question

我试图让嵌套的IE10 +媒体查询在SASS中工作，我不理解输出。我认为使用媒体查询or运算符,会让事情变得奇怪。因此，此查询将不适用于所有情况，因为输出的唯一内容是or的一侧。

请注意，这些最初是mixins;我删除了mixins以便于调试

.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;
    }
  }
}

编译到：

@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;
  }
}

Answer 1

这似乎是一个超特定的案例，出现在Sass中的部分不当行为和部分模棱两可的期望。

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

/* 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尝试编写类似于有效媒体查询的内容的情况（因为它知道screen and all无效）。

所以只需指定一次显示类型。

.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嵌套嵌套媒体查询以使用媒体查询或运算符

1 个答案: