如何在sass中一起使用@support @media？

Question

兩個語句不似乎是有效的青菜

@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