【问题标题】：Why do I get an undefined Foundation variable error in this SASS file?为什么我在这个 SASS 文件中得到一个未定义的 Foundation 变量错误？
【发布时间】：2014-05-01 06:40:02
【问题描述】：

我有一个 Rails 4 应用程序，使用 Foundation-rails v5.2.1.0 gem，以及一个用于我的应用程序布局的自定义 SCSS 文件。当我使用 foundation_and_overrides.scss 文件中的变量时，我收到以下错误：

Undefined variable: "$header-font-family"

我在下面包含了相关代码。如果需要，我可以发布更多。有人知道这里发生了什么吗？

来自application.css：

*
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .
 */

来自foundation_and_overrides.scss：

// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;

来自custom.css.scss：

$include-html-global-classes: false;
@import "foundation/components/global";
. 
. 
. 
.footer {
  background-color: black;
  color: white;
  height: 100px;
  font-family: $header-font-family;
}

【问题讨论】：

标签： ruby-on-rails css sass zurb-foundation

【解决方案1】：

您收到错误是因为foundation_and_overrides.scss 在 custom.css.scss 之后执行。最好的方法是在部分定义变量并在基础之后将其导入主样式表中。

先把文件名改成

foundation_and_overrides.scss 到 _foundation_and_overrides.scss

然后在基础后将其导入 custom.css.scss文件中

@import 'foundation_and_overrides';

更新

将您的 application.css 重命名为 application.css.scss 和 custom.css.scss 重命名为 custom.scss

在您的 application.css.scss 中删除 *= require_tree .

然后用

导入你的主样式表

@import 'custom'

希望对你有帮助

【讨论】：

太棒了！谢谢你。一个问题，这最终会增加发送给客户的 CSS 文件的总重量吗？含义：我现在会发送重复文件吗？
@blundin 您应该从 application.scss 文件中删除 *= require foundation_and_overrides 并在导入基础后在 custom.scss 中导入您的覆盖。如果您查看页面的源代码，那么您只会看到 application.css 文件，其中包含您导入的内容，没有任何重复。
如果您使用 assets/stylesheets 中的子文件夹并收到Sass::SyntaxError: File to import not found or unreadable: global. 错误，则有一个解决方法github.com/zurb/foundation/issues/3855（即config.sass.load_paths += [ "#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/components", "#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/" ]）

【解决方案2】：

最干净的方法是添加行

@import "custom";

到你的文件foundation_and_overrides.scss之前行

@import "foundation";

如已接受的答案所述，无需从application.css.scss 中删除*= require_tree .。如果您将require_tree . 留在其中，也无需将require foundation_and_overrides 添加到application.css。

【讨论】：

这对现有答案有何影响？
它可以让您的 application.css.scss 保持干净和正常工作（拉入 css 文件需要require tree .，不应删除）。

【解决方案3】：

根据Rails Docs：

如果你想使用多个 Sass 文件，你通常应该使用 Sass >@import 规则而不是这些 Sprockets 指令。当使用 Sprockets >directives 时，Sass 文件存在于它们自己的范围内，使变量或 >mixin 仅在它们定义的文档中可用。

所以在这种情况下，指令的顺序（application.css 中以 *= 开头的行）无关紧要，因为这些文件中的每一个都存在于自己的范围内，您无法从另一个 scss 访问它们的变量文件。这就是为什么您想要@import foundation_and_overrides 然后自定义，或者@import 您的自定义样式表intofoundation_and_overrides。

【讨论】：