css - 如何在 Sass 中同时使用@support 和@media？

Question

这两个语句在 Sass 中似乎都是有效的:

@supports (display: -ms-grid) {
  @media screen and (min-width: $breakpoint-sm) {
    display: block;
  }
}

或

@media screen and (min-width: $breakpoint-sm) {
  @supports (display: -ms-grid) {
    display: block;
  }
}

有什么解决方案可以同时使用两者吗？类似于 @media screen and (min-width: $breakpoint-sm) and @supports (display: -ms-grid) {...}?

Answer 1

这两个选项似乎都是有效的 SCSS。

DEMO .

但是如果你想要 SASS，你需要去掉分隔符。

DEMO

$breakpoint-sm: 420px

@supports (display: -ms-grid)
  @media screen and (min-width: $breakpoint-sm)
    display: block

@media screen and (min-width: $breakpoint-sm)
  @supports (display: -ms-grid)
    display: block