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

因此绝对不需要使用Element Query的混乱方法。

PS另请查看Breakpoint和Breakpoint Slicer以获得更好的媒体查询操作。

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

1 个答案: