css - 如何放置#foo :media(min-available-width:350px and max-available-width:750px) into 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更好的媒体查询操作。