如何在 Sass 中同时使用 @support 和 @media？答案

【问题标题】：How to use @support and @media together in Sass?如何在 Sass 中同时使用 @support 和 @media？
【发布时间】：2018-03-18 12:15:52
【问题描述】：

这两个语句在 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) {...} 之类的东西？

【问题讨论】：

标签： css sass media-queries

【解决方案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

【讨论】：