Question

我正在尝试使用Foundation 5的新媒体查询。我创建了一个foundation_overrides.scss文件，并在app.css主标记中index.html文件的链接下方添加了一个指向其css文件的链接：

<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-overrides.css" />

...这里是app.scss：

@import "settings";
@import "foundation";

...和foundation-overrides.scss：

@media #{$small-up} { 
  body {background: red;} 
} 
@media #{$medium-up} { 
  body {background: orange;} 
} 
@media #{$large-up} { 
  body {background: yellow;} 
} 
@media #{$xlarge-up} { 
  body {background: green;} 
} 
@media #{$xxlarge-up} { 
  body {background: blue;} 
}

不幸的是，这会返回以下Sass错误：

语法错误：未定义的变量：“$ small-up”

我还尝试取消注释@import "foundation/functions";中的_settings.scss行，但错误仍然存在。

使用这些媒体查询需要更改哪些内容？

Answer 1

失败的原因是它无法找到$small-up变量，或者它不存在。如果在媒体查询之后定义变量，它也将失败。

尝试以下方法：

确保您在媒体前加载_settings.scss 查询。
确保_settings.scss已正确导入：在.test {}中添加_settings.scss课程，并查看它是否在您生成的CSS中。
在_settings.scss中确保取消注释变量：例如取消注释// $small-up: $screen;

基本上你的sass应按此顺序排列：

$small-up: $screen !default;
@media #{$small-up} { }

http://foundation.zurb.com/docs/media-queries.html

Answer 2

您现在可能已经解决了这个问题，但没有回答问题的最终原因是什么。我要检查的第一件事是你是否正在编译你的案例'样式表'中正确的css目录。同样从您的示例中，您显然在文件名中出错。在您的标题中，您有foundation-overrides.css，但您的sass文件是“foundation_overrides.scss”。最有可能的是，您需要在链接rel名称中将连字符更改为下划线。

基金会5媒体查询Sass错误

2 个答案: