Как использовать @support @media вместе в sass?

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.

ДЕМО.

Но если вы хотите 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