如何將#foo：media（min-available-width：350px和max-available-width：750px）放入SCSS中

Question

我正在使用Element Query項目，該項目允許在任何元素處使用@media queries。這是它如何處理：

#foo:media(min-available-width:350px and max-available-width:750px) { 
    background:red; 
} 

但這種語法生成錯誤（怪不得）：

(Line 1: Invalid CSS after "...available-width": expected ")", 
was ":350px and max-...") 

的問題是:然後space。

如何使自己的語法成SCSS文件？或者如何告訴預處理程序代碼的哪些部分應該保留原樣？或者至少，如何使這段代碼工作？

其他情況：

#foo:media(min-available-width:350px) { 
    background:red; 
} 

#foo:media(max-available-width:750px) { 
    background:red; 
} 

#foo .bar:media(min-available-width:350px) { 
    background:red; 
} 

Answer 1

不要使用元素查詢。

可以實現與有效的CSS和基本SASS相同的結果：

#foo { 
    @media (min-width:350px) { 
    background:red; 
    } 
} 

這將導致下面的CSS：

@media (min-width: 350px) { 
    #foo { 
    background: red; 
    } 
} 

所以這是完全沒有必要使用元素的凌亂的方法查詢。

PS另請參閱Breakpoint和Breakpoint Slicer以更好地進行媒體查詢操作。