Foundation 5 媒体查询 Sass 错误

Question

我正在尝试使用 Foundation 5 的新媒体查询。我创建了一个foundation_overrides.scss 文件，并在index.html 头标签中我的app.css 文件的链接下方添加了一个指向其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”

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

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

Answer 1

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

尝试以下方法：

1. 确保在加载媒体之前加载 _settings.scss 查询。
2. 确保_settings.scss 已正确导入：将.test {} 类放入_settings.scss 并查看它是否在您生成的css 中。
3. 在_settings.scss 中确保变量未注释：例如取消注释此// $small-up: $screen;

基本上你的 sass 应该是这样的：

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

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

Answer 2

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