1

我正在使用允许在任何元素上使用的元素查询项目。@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-...")

问题是 a:然后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;
}
4

1 回答 1

0

不要使用元素查询。

您可以使用有效的 CSS 和基本 SASS 获得相同的结果：

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

这将产生以下 CSS：

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

所以完全没有必要使用元素查询这种乱七八糟的方法。

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

于 2013-07-31T22:38:28.773 回答