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