css - How to put #foo:media(min-available-width:350px and max-available-width:750px) into SCSS -

i'm using element query project allows use @media queries @ element. it's how it's handled:

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

but such syntax generates error (no wonder):

(line 1: invalid css after "...available-width": expected ")",  ":350px , max-...") 

the problem : , space.

how make possible put own syntax scss files? or how tell preprocessor parts of code should left are? or @ least, how make particular piece of code work?

other cases:

#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; } 

don't use element query.

you can achieve same result valid css , basic sass:

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

this results in following css:

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

so there's absolutely no need use messy approach of element query.

ps have @ breakpoint , breakpoint slicer better media query manipulation.