Comment utiliser @support @media ensemble dans sass?

Question

Les deux déclaration ne semble pas être valable dans SASS

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

ou

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

Existe-t-il une solution à utiliser à la fois quelque chose de ligne en ligne comme @media screen and (min-width: $breakpoint-sm) and @supports (display: -ms-grid) {...}

Answer 1

Ces deux options semble être valide SCSS.

DEMO.

Mais si vous voulez SASS, vous devez vous débarrasser des délimiteurs.

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